.content-picker-field {
    @include _combo-picker($EDIT-ENGINE);
}

div[role="combobox"] {
    // DEFAULT
    @include _combo($APP);

    // SIDE PANEL
    body[data-indigo-gwt-side-panel="open"] .window-side-panel & {
        @include _combo($SIDE-PANEL);
    }

    // EDIT ENGINE
    .engine-panel &,
    .translate-content-engine &,
    .engine-window & {
        @include _combo($EDIT-ENGINE);
    }

    // PICKER
    #JahiaGxtContentPickerWindow &,
    #contentmanager & {
        @include _combo(LIGHT);

        body[data-indigo-picker-search="open"] & {
            @include _combo(LIGHT);

            input {
                background: #F5F5F5 !important;
                box-shadow: none !important;
            }
        }
    }

    // PICKER > SEARCH
    #JahiaGxtContentPickerWindow #CRTsearchTabItem & {
        @include _drop-down(LIGHT);

        input {
            background: #F5F5F5 !important;
            box-shadow: none !important;
        }
    }

    // PICKER TOP BAR
    #JahiaGxtContentPickerWindow #JahiaGxtManagerTobTable {
        @include _drop-down(LIGHT);
    }
}

#JahiaGxtSearchTab {
    .x-form-field-wrap {
        width: auto !important;
    }
}

.x-form-text {
    @include _input($APP);

    body[data-indigo-gwt-side-panel="open"] & {
        @include _input($SIDE-PANEL);
    }
}

.x-form-date-trigger {
    color: _theme($INPUT--COLOR, normal) !important
}


/////////////////////////////////////////////////
// DATE PICKER //////////////////////////////////
/////////////////////////////////////////////////

.x-date-menu {
    box-shadow: none;
    background: transparent !important;
    z-index: 1501 !important;

    .x-date-hours-panel {
        margin-top: 22px;

        &:before {
            content: _dictionary("timepicker");
            @include text(11px, _color("secondary"), _weight("normal"));
            text-transform: uppercase;
            bottom: 40px;
            position: absolute;
        }

    }

    &.x-menu {

        body[data-indigo-styled-combos="true"] & {
            z-index: 9999999 !important;
        }

    }

    td {
        transition: _transition("all", "quicker");
    }

    // Another container
    .x-menu-list {
        padding: 5px 10px 10px;
        background: _theme($DATE-PICKER--BG, $DATE-PICKER);
        box-shadow: 2px 2px 10px rgba(38, 38, 38, 0.5);

        body[data-indigo-gwt-side-panel="open"][data-indigo-gwt-panel-tab="JahiaGxtSidePanelTabs__JahiaGxtSearchTab"] & {
            margin-left: 67px;
        }

        // Yet another container
        .x-menu-list-item {

            // Last container
            .x-date-picker {
                background: transparent;
                width: 18em !important;

                // Header and footer containers
                > table {

                    // Month navigator container
                    &:nth-child(1) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 1 */

                        td {
                            background: transparent;
                            padding: 5px 5px 10px;


                            // Previous month button contaeinr
                            &.x-date-left {

                                // button (can not use the button() mixin here)
                                .x-date-left-icon {
                                    background-image: url( _icon("navPrevious", "white")) !important;
                                    background-size: 16px 16px;
                                    opacity: 0.8;

                                    &:hover {
                                        opacity: 1;
                                    }

                                }
                            }

                            // Month Combo Container (actually a button - do not use button() mixin)
                            &.x-date-middle {

                                // Button container, contains downward arrow
                                .x-btn-arrow {
                                    .x-btn-text {
                                        width: 13em !important;
                                    }
                                    background: none;
                                    padding: 0;

                                    // Actual button, contains label
                                    button {
                                        background: url(_icon("arrowDown", "white")) no-repeat right center;
                                        padding-right: 15px;
                                        text-transform: uppercase;
                                        @include text(11px, _theme($DATE-PICKER--MONTH-TITLE, $DATE-PICKER), _weight("normal"));

                                        &:hover {
                                            color: _theme($DATE-PICKER--MONTH-TITLE---HOVER, $DATE-PICKER);
                                        }
                                    }
                                }

                            }

                            // Next month button contaeinr
                            &.x-date-right {

                                // button (can not use the button() mixin here)
                                .x-date-right-icon {
                                    background-image: url("../images/icons/icon_arrow_right_single_white@X2.png") !important;
                                    background-size: 16px 16px;

                                    opacity: 0.8;

                                    &:hover {
                                        opacity: 1;
                                    }
                                }
                            }
                        }

                    }

                    // Today Link button
                    &:nth-child(3) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 2 */
                        background: transparent;
                        // Today link container
                        .x-date-bottom {

                            background: transparent;
                            border: none;
                            padding: 9px 0 0 0;

                            .x-btn-text {
                                height: auto;
                                padding: 4px;
                                background: _theme($DATE-PICKER--ACTION-BUTTON--BG, $DATE-PICKER);
                                @include text(11px, _theme($DATE-PICKER--ACTION-BUTTON--COLOR, $DATE-PICKER), _weight("light"));

                                &:hover {
                                    background: _theme($DATE-PICKER--ACTION-BUTTON--BG---HOVER, $DATE-PICKER);
                                    color: _theme($DATE-PICKER--ACTION-BUTTON--COLOR---HOVER, $DATE-PICKER);
                                }
                            }


                        }

                    }
                }

                // Date grid container
                > div {

                    // Header days of week
                    .x-date-days {

                        // Day of week container
                        td {
                            width: 25px;

                            border: none;
                            @include text(10px, _theme($DATE-PICKER--DAY--COLOR, $DATE-PICKER), _weight("bold"));
                        }
                    }

                    // Days of month container
                    .x-date-inner {

                        // Day entry
                        td {

                            border: none;
                            width: 25px;
                            height: 25px;

                            // Day container
                            a {
                                text-align: center;
                                height: 100%;
                                line-height: 21px;

                                font-weight: inherit;
                                color: inherit;

                                border: none;
                                background: transparent;
                            }

                            // Day label
                            span {
                                font-weight: inherit;
                                color: inherit;
                            }

                            // Selected date
                            &.x-date-selected {
                                background: _theme($DATE-PICKER--DAY--BG---SELECTED, $DATE-PICKER);
                                @include text(10px, _theme($DATE-PICKER--DAY--COLOR---SELECTED, $DATE-PICKER), _weight("normal"));

                                // Hover date
                                &.x-date-active-hover {
                                    font-weight: _weight("extralight");
                                    background: _theme($DATE-PICKER--DAY--BG---SELECTED, $DATE-PICKER) !important;
                                    color: _theme($DATE-PICKER--DAY--COLOR---SELECTED, $DATE-PICKER);
                                }


                            }

                            // Day belonging to previous month
                            &.x-date-prevday {
                                background: _theme($DATE-PICKER--DAY-MUTED--BG, $DATE-PICKER);
                                @include text(10px, _theme($DATE-PICKER--DAY-MUTED--COLOR, $DATE-PICKER), _weight("normal"));
                            }

                            // Day belonging to current month
                            &.x-date-active {
                                background: _theme($DATE-PICKER--DAY--BG, $DATE-PICKER);
                                @include text(10px, _theme($DATE-PICKER--DAY--COLOR, $DATE-PICKER), _weight("normal"));

                            }

                            // Day belonging to following month
                            &.x-date-nextday {
                                background: _theme($DATE-PICKER--DAY-MUTED--BG, $DATE-PICKER);
                                @include text(10px, _theme($DATE-PICKER--DAY-MUTED--COLOR, $DATE-PICKER), _weight("normal"));
                            }

                            // Hover date
                            &.x-date-active-hover {
                                font-weight: _weight("extralight");
                                background: _theme($DATE-PICKER--DAY--BG---HOVER, $DATE-PICKER) !important;
                                color: _theme($DATE-PICKER--DAY--COLOR---HOVER, $DATE-PICKER);

                            }
                        }

                    }
                }
            }

            // Drop down to change month / year
            .x-date-mp {

                width: calc(100% + 20px) !important;
                top: -5px !important;
                left: -10px !important;
                height: calc(100% + 15px) !important;
                background: _theme($DATE-PICKER--YEAR--BG, $DATE-PICKER);
                padding-top: 33px;
                box-sizing: border-box;

                table,
                tbody {
                    display: block;
                    width: 100% !important;
                    height: 100% !important;
                    box-sizing: border-box;
                }

                tbody {
                    padding: 5px 5px 0 5px;
                }

                tr {
                    display: block;
                    width: 100%;
                    height: 16.2%;
                    box-sizing: border-box;
                }

                td {
                    display: inline-block;
                    width: 25%;
                    height: 100%;
                    box-sizing: border-box;
                    line-height: 24px;
                    padding: 5px 0;
                }

                // Top Container
                > table {

                    td {

                        // Actual button
                        a {

                            font-size: inherit;
                            font-weight: inherit;
                            font-family: inherit;
                            color: inherit;
                            height: 100%;
                            padding: 0;
                            border: none;
                            background: none;
                            line-height: inherit;

                        }

                        // Month button
                        &.x-date-mp-month {
                            @include text(11px, _theme($DATE-PICKER--MONTH--COLOR, $DATE-PICKER), _weight("normal"));
                            background: _theme($DATE-PICKER--YEAR--BG, $DATE-PICKER);

                            &:hover {
                                color: _theme($DATE-PICKER--MONTH--COLOR---HOVER, $DATE-PICKER);
                                background: _theme($DATE-PICKER--MONTH--BG---HOVER, $DATE-PICKER);
                            }

                            // Selected button
                            &.x-date-mp-sel {
                                color: _theme($DATE-PICKER--MONTH--COLOR---SELECTED, $DATE-PICKER);
                                background: _theme($DATE-PICKER--MONTH--BG---SELECTED, $DATE-PICKER);
                                &:hover {
                                    color: _theme($DATE-PICKER--MONTH--COLOR---SELECTED, $DATE-PICKER);
                                    background: _theme($DATE-PICKER--MONTH--BG---SELECTED, $DATE-PICKER);
                                }
                            }
                        }

                        // Year button
                        &.x-date-mp-year {
                            @include text(11px, _theme($DATE-PICKER--YEAR--COLOR, $DATE-PICKER), _weight("normal"));
                            background: _theme($DATE-PICKER--YEAR--BG, $DATE-PICKER);

                            &:hover {
                                color: _theme($DATE-PICKER--YEAR--COLOR---HOVER, $DATE-PICKER);
                                background: _theme($DATE-PICKER--YEAR--BG---HOVER, $DATE-PICKER);
                            }

                            // Selected button
                            &.x-date-mp-sel {
                                color: _theme($DATE-PICKER--YEAR--COLOR---SELECTED, $DATE-PICKER);
                                background: _theme($DATE-PICKER--YEAR--BG---SELECTED, $DATE-PICKER);

                                &:hover {
                                    color: _theme($DATE-PICKER--YEAR--COLOR---SELECTED, $DATE-PICKER);
                                    background: _theme($DATE-PICKER--YEAR--BG---SELECTED, $DATE-PICKER);
                                }
                            }
                        }


                        // Year naviagtion button
                        &.x-date-mp-ybtn {

                            padding: 0 !important;

                            a {
                                width: 100%;
                            }

                            // Previous year block button
                            .x-date-mp-prev {
                                background: url( _icon("navPrevious", "white")) no-repeat center center _theme($DATE-PICKER--YEAR--BG, $DATE-PICKER);
                                background-size: 14px 14px;
                                opacity: 0.8;

                                &:hover {
                                    opacity: 1;
                                }
                            }

                            // Following year block button
                            .x-date-mp-next {
                                background: url("../images/icons/icon_arrow_right_single_white@X2.png") no-repeat center center _theme($DATE-PICKER--YEAR--BG, $DATE-PICKER);
                                background-size: 14px 14px;
                                opacity: 0.8;

                                &:hover {
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }

                // Seperator dividing Months / Years
                .x-date-mp-sep {
                    border: none;
                }

                // OK, Cancel buttons container
                .x-date-mp-btns {
                    height: 16%;
                    background: none;
                    position: absolute;
                    top: 0;
                    left: 0;

                    td {
                        width: 100%;
                        padding: 5px;
                        box-sizing: border-box;
                        border: none;

                        &:before {
                            content: _dictionary("year_picker");
                            line-height: 27px;

                            @include text(_size("small"), _theme($DATE-PICKER--MODAL-TITLE--COLOR, $DATE-PICKER), _weight("normal"));
                        }
                    }

                    // OK button
                    .x-date-mp-ok {
                        height: 100%;
                        background-color: _theme($DATE-PICKER--ACTION-BUTTON--BG, $DATE-PICKER);
                        opacity: 1;
                        width: 35px;
                        text-indent: 0;
                        float: right;
                        margin: 0;

                        &:hover {
                            opacity: 1;
                        }

                    }

                    // Cancel button
                    .x-date-mp-cancel {
                        background: url(_icon("closeSmall", "white")) no-repeat center center;
                        background-size: 10px 10px;
                        text-indent: -50000px;
                        width: 25px;
                        opacity: 0.8;
                        background-color: transparent;
                        position: absolute;
                        left: 5px;
                        height: 26px;

                        &:hover {
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }
}


/////////////////////////////////////////////////
// COMBOS ///////////////////////////////////////
/////////////////////////////////////////////////

.x-combo-list {
    @include _combo-list($APP-MENUS);
}


/////////////////////////////////////////////////
// LIST BOX /////////////////////////////////////
/////////////////////////////////////////////////

.x-form-list {
    border: none;
    background: _theme($LIST-BOX--BG, $EDIT-ENGINE);
    height: 200px !important;


    .x-combo-list {
        /* Combo Outer Container */
        width: auto !important;
        height: 100% !important;
        background: transparent !important;
        overflow: scroll !important;
        z-index: $ZINDEX--COMBO_LIST;
        position: relative;

        border: none;
        box-shadow: none;
    }

    .x-combo-list-item {
        border: none;
        box-sizing: border-box;
        text-align: left !important;
        background: _theme($LIST-BOX--ROW--BG, $EDIT-ENGINE);
        padding: 8px 9px !important;
        border: none;
        width: 100%;

        @include text(11px, _theme($LIST-BOX--ROW--COLOR, $EDIT-ENGINE), _weight("semilight"));

        &.x-combo-over {
            /* Selected / Hovered */
            border: none !important;
            color: _theme($LIST-BOX--ROW--COLOR---HOVER, $EDIT-ENGINE);
            background: _theme($LIST-BOX--ROW--BG---HOVER, $EDIT-ENGINE);
        }

        &.x-view-highlightrow {
            /* Selected / Hovered */
            border: none !important;
            color: _theme($LIST-BOX--ROW--COLOR---SELECTED, $EDIT-ENGINE);
            background: _theme($LIST-BOX--ROW--BG---SELECTED, $EDIT-ENGINE);
        }
    }
}


/////////////////////////////////////////////////
// CONTEXT MENUS ////////////////////////////////
/////////////////////////////////////////////////

// Add titles to context menus ...
.x-menu-list::before {
    .menu-edit-menu-publication &,
    .menu-edit-menu-view &,
    .menu-edit-menu-edit &,
    .menu-edit-menu-mode &,
    .editModeContextMenu & {
        content: attr(data-indigo-title);
    }
}


/* Context Menus */
.x-menu {

    body[data-indigo-styled-combos="true"] &,
    body[data-indigo-is-manager="true"] & {
        @include _context-list($APP-MENUS);

        // Show Live Entry even if disabled
        .x-menu-list-item.x-item-disabled .x-menu-item.toolbar-item-live {
            display: block !important;
            color: rgba(_theme($MENU-OPENED--COLOR, $APP), .6) !important;
            background: _theme($MENU-OPENED--BG, $APP) !important;
        }

        // Menu icons
        .x-menu-list-item .x-menu-item.toolbar-item-grid-view-sort-asc {
            background-image: url(../images/icons/context-menu/sort-alpha-asc.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 1 */
        }

        .x-menu-list-item .x-menu-item.toolbar-item-grid-view-sort-desc {
            background-image: url(../images/icons/context-menu/sort-alpha-desc.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 2 */
        }

        .x-menu-list-item .x-menu-item.toolbar-item-grouping-view-group-by {
            background-image: url(../images/icons/context-menu/make-group.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 3 */
        }
    }
}


.x-item-disabled {
    opacity: 1;
}

.x-menu-item-icon {
    display: none;
}

.x-menu .x-menu-item.x-menu-check-item {
    padding-left: 25px !important;

    .x-menu-item-icon {
        display: block;
        top: 6px;
        left: 6px;
    }
}

/* Combo List Seperator line */
.x-menu-sep-li {
    display: none;
}

/* Context Menu Drop Shadow */
.x-shadow {
    display: none !important;
}

/* Used for scrolling Context menus when they dont fit on screen */
.x-menu-scroller {
    background: _theme($MENU-SCROLL--BG, $CONTEXT-MENU)
}

.x-menu-scroller-top {
    background-image: url(../images/menu-scroll-up.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 4 */
}

.x-menu-scroller-bottom {
    background-image: url(../images/menu-scroll-down.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 5 */
}


/////////////////////////////////////////////////
// THUMB WRAPS //////////////////////////////////
/////////////////////////////////////////////////

/* Thumb wraps
   Used to create a thumb in List View, ie. in Files */

.x-combo-list-inner {
    .thumb-wrap {
        display: block;
        width: 100% !important;
        margin: 0 !important;
        height: auto;

        .thumb {
            display: none;
        }

        .x-editable {
            display: block;
        }
    }
}


.thumb-wrap {
    border: none !important;
    padding: 0 0 5px 0 !important;
    float: none !important;
    position: relative;
    background: none;

    margin-bottom: 24px !important;

    > div {
        /* Some Thumbs have extra divs containing more Meta Data, so hide them */
        display: none;

        &:first-child { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 3 */
            /* Just show the first Div which contains the file name */
            display: block;
        }
    }

    .thumb {
        /* Image */
        height: auto !important;
        padding: 5px !important;
        box-sizing: border-box;
        z-index: 9999;
        position: relative;

        background: _theme($THUMB--BG, $THUMBS);

        #JahiaGxtFileImagesBrowseTab & {
            width: 100% !important;
        }
    }


    .thumbDetails {
        /* Meta Data */
        position: absolute;
        top: -27px;
        left: 1px;
        margin: 0 !important;
        width: calc(100% - 50px);
        z-index: 999;


        div {
            /* Hide ALL */
            /* Just Show the File Name Meta Container */

            font-family: "Nunito Sans", sans-serif;
            font-size: 12px;
            color: _color("primary", normal);
            font-weight: 300;
            display: block !important;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 5px;

            b {
                font-family: "Nunito Sans", sans-serif;
                font-size: 8px;
                color: #6a6a6a;
                font-weight: 300;
                display: block;
                margin-right: 5px;
                text-transform: uppercase;
            }
        }

    }


    &.x-view-over,
    &.indigo-force-open {
        z-index: 999999999;

        .thumbDetails {
            /* Hover State */
            display: block !important;
        }
    }


    &.x-view-item-sel,
    &.x-view-item-sel.x-view-over {
        z-index: 99999999;
        background: _color("tertiary", normal) !important;

        .thumbDetails {
            /* Selected State */
            div {
                color: #F5F5F5 !important;

                b {
                    color: #F5F5F5 !important;
                }
            }
        }
    }

    &.x-view-item-sel.x-view-over {
        z-index: 99999999999;
    }
}

/////////////////////////////////////////////////
// FORMS ////////////////////////////////////////
/////////////////////////////////////////////////


/* Global Form */
form:not(.ck-form) {
    padding: 0 !important;
    width: auto !important;
}

legend {
    padding: 0 !important;

    .x-fieldset-header-text {
        // Wahoo, the label text !!
        @include _label("legend");
    }
}


.x-component {
    input[type="checkbox"] {
        // UNCHECKED STATE
        -moz-appearance: initial;
        position: relative !important;
        width: 15px !important;
        height: 15px !important;
        margin-right: 3px;
        left: auto !important;

        // AS SWITCHER
        @at-root .x-component legend input[type="checkbox"] {
            position: absolute !important;
            z-index: 99999;
            width: 55px !important;
            height: 24px !important;
            top: 13px;
            right: 22px;

            &:hover {
                cursor: pointer;
            }
        }

        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;

            border: _theme($CHECKBOX--BORDER, $APP);
            background: _theme($CHECKBOX--BG, $APP);
            box-shadow: _theme($CHECKBOX--SHADOW, $APP);

            // AS SWITCHER
            @at-root .x-component legend input[type="checkbox"]:before {
                height: 24px;
                width: 55px;
                border: none;
                border-radius: 12px;
                text-align: right;
                padding-right: 4px;
                padding-top: 3px;
                line-height: 17px;

                content: _dictionary("off");
                background: _theme($TOGGLE--RAIL, $EDIT-ENGINE);
                box-shadow: _theme($TOGGLE--SHADOW, $EDIT-ENGINE);
                text-transform: uppercase;

                @include text(10px, _theme($TOGGLE--LABEL---OFF, $EDIT-ENGINE), _weight("extrabold"));

            }
        }

        &:after {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

            // AS SWITCHER
            @at-root .x-component legend input[type="checkbox"]:after {
                right: auto;
                left: 2px;
                top: 2px;
                width: 20px;
                height: 20px;
                border-radius: 10px;
                line-height: 20px;

                content: " ";
                background: _theme($TOGGLE--SHUTTLE---OFF, $EDIT-ENGINE);
            }
        }

        // CHECKED STATE
        &:checked:before {

            // AS SWITCHER
            @at-root .x-component legend input[type="checkbox"]:checked:before {
                content: " ";
            }
        }

        &:checked:after {
            background: no-repeat center center;
            background-image: url(_icon("tick", "white"));
            background-size: 15px 15px;
            background-color: _theme($CHECKBOX--BG---CHECKED, $APP);

            // AS SWITCHER
            @at-root .x-component legend input[type="checkbox"]:checked:after {
                right: 2px;
                left: auto;
                text-align: center;

                content: _dictionary("on");
                background: _theme($TOGGLE--SHUTTLE---ON, $EDIT-ENGINE);
                text-transform: uppercase;

                @include text(10px, _theme($TOGGLE--LABEL---ON, $EDIT-ENGINE), _weight("extrabold"));
            }
        }

        // FOCUS
        &.x-form-checkbox:focus {
            // Need extra weight to over ride GXT selector
            outline: none !important;
        }
    }
}

fieldset {
    border: none !important;
    padding: 43px 10px 20px 39px !important;
    margin: 0 23px 0px 0 !important;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #c4c0c0 !important;

    &.x-panel-collapsed {
        background: transparent;
        border-bottom: 1px solid #c4c0c0 !important;
        padding-bottom: 10px !important;

    }
}

.x-component label {
    // See .x-form-item-label
    @include _label("normal")
}

/* Form item Outer Container ... */
.x-form-item {
    margin: 0;
}

/* Form Item Mid container */
.x-form-element {
    padding: 0 !important;

}

/* Form Item Inner Container */
.x-form-field-wrap {
    left: 0 !important;
    top: 0 !important;
    // Check impact on other elements
    box-sizing: border-box;
}


/* Form Label */
.x-form-item-label {
    width: auto !important;
    float: none !important;
    clear: both !important;
    display: inline-block !important;

    @include _label("normal")
}

/* Text Area */
div.engine-panel,
div.engine-window {
    fieldset.x-fieldset div.x-form-field-wrap.text-area {
        width: 100% !important;

        textarea {
            width: 100% !important;
            box-sizing: border-box;
        }
    }
}

.text-area {
    height: auto !important;
}

.x-form-textarea {
    border: none;
    height: 180px !important;
    background: _theme($INPUT--BG, $APP) !important;
    padding: 3px 40px 3px 5px !important;
    border: 1px solid transparent !important;
    transition: none !important;

    @include text(13px, _theme($INPUT--COLOR, $APP), _weight("semilight"));
    // Exceptions ...
    .engine-panel & {
        background: _theme($INPUT--BG, $EDIT-ENGINE) !important;

        @include text(13px, _theme($INPUT--COLOR, $EDIT-ENGINE), _weight("semilight"));
        box-shadow: 0px 1px 2px _color("black", a);
    }

    &:hover {
        background: _theme($INPUT--BG---HOVER, $APP);
        color: _theme($INPUT--COLOR---HOVER, $APP);
        // Exceptions ...
        .engine-panel & {
            background: _theme($INPUT--BG---HOVER, $EDIT-ENGINE) !important;
            color: _theme($INPUT--COLOR---HOVER, $EDIT-ENGINE) !important;
            box-shadow: 0px 1px 2px _color("black", b) !important;
        }
    }

    &:focus {
        background: _theme($INPUT--BG---FOCUS, $EDIT-ENGINE) !important;
        color: _theme($INPUT--COLOR---FOCUS, $EDIT-ENGINE) !important;

        // Exceptions ...
        .engine-panel & {
            background: _theme($INPUT--BG---FOCUS, $EDIT-ENGINE) !important;
            color: _theme($INPUT--COLOR---FOCUS, $EDIT-ENGINE) !important;
            box-shadow: 0px 1px 2px _color("black", b) !important;
        }
    }

    &[disabled] {
        background: _theme($INPUT--BG---DISABLED, $APP);
        padding: 3px 40px 3px 5px;
        padding-left: 0;
        transition: $DEFAULT--TRANSITION;

        @include text(13px, _theme($INPUT--COLOR---DISABLED, $APP), _weight("semilight"));
    }
}

/* DUAL LIST */
@include dual_list();

/* Checkbox Container */
.x-form-check-wrap {
    height: auto !important;
    margin-right: 10px;
}

/* Checkbox Radio Button */
.x-form-radio {
    left: auto !important;
    top: auto !important;
}

/* Checkbox Label */
.x-form-cb-label {
    margin: 0 0 0 5px;
    padding: 0 !important;
    left: auto !important;
    top: auto !important;

    @include _label("normal");
}

// Form Buttons
form,
.edit-content-engine { // CHANGE THIS AFTER TO BE INCLUDING GENERAL STYLING AND THEN PERSONALISE ...
    @include button("FORM");
}

/* Button Bars at the end of Panels, ie OK, Save, Cancel, ... */
.x-panel-btns {
    padding: 0;
}

// FOoter bar buttons, ie. SAVE, CANCEL, ...
.x-panel-fbar {
    /* Button Bar Container ... */
    padding: 0;
    left: auto;
    top: auto;

    .x-toolbar-ct {
        /* Yet Another Container */
        display: block;
        width: auto;
    }

    @include _button(".button-create", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-save", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-start", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-cancel", "ACTIONBAR", "remove-icons");
    @include _button(".button-work-in-progress-off", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-work-in-progress-on", "WIP---SUGGESTED", "remove-icons");
}

/* Button Bar, regular button bar */
.x-panel-btns {
    @include button("SIDE_PANEL", "remove-icons");
}

/* Button Bar, pagination */
.x-panel-bbar {
    width: 100%;

    .x-toolbar {
        border: none;
        width: auto !important;
        padding: 0;
        margin: 0;
        background: transparent !important;
    }
}


.x-grid3 {
    /* Container */
    width: 100% !important;
    height: 100% !important;
    background: transparent;

    .x-grid3-td-publicationInfo {
        width: 3px !important;
        height: 25px;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;

        .x-grid3-col-publicationInfo {
            padding: 0 !important;
        }

        .x-component,
        table {
            height: 100%
        }

        img {
            overflow: hidden;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;

            padding-left: 5px;
            width: 5px;
            height: 25px !important;

            &[src$="/conflict.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 4 */
                /* Conflict */
                background: _color("status", conflict) !important;
            }

            &[src$="/deleted.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 5 */
                /* Deleted */
                background: _color("status", deleted) !important;
            }

            &[src$="/livemodified.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 6 */
                /* Live Modified */
                background: _color("status", livemodified) !important;
            }

            &[src$="/liveonly.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 7 */
                /* Live Only */
                background: _color("status", liveonly) !important;
            }

            &[src$="/locked.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 8 */
                /* Locked */
                background: _color("status", locked) !important;
            }

            &[src$="/mandatorylanguageunpublishable.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 9 */
                /* Mandatory Language Unpublishable */
                background: _color("status", mandatorylanguageunpublishable) !important;
            }

            &[src$="/mandatorylanguagevalid.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 10 */
                /* Mandatory Language Valid */
                background: _color("status", mandatorylanguagevalid) !important;
            }

            &[src$="/markedfordeletion.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 11 */
                /* Marked FOr Deletion */
                background: _color("status", markedfordeletion) !important;
            }

            &[src$="/modified.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 12 */
                /* Modified */
                background: _color("status", modified) !important;
            }

            &[src$="/multipleWF.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 13 */
                /* Multiple WF */
                background: _color("status", multipleWF) !important;
            }

            &[src$="/notpublished.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 14 */
                /* Not Published */
                background: _color("status", notpublished) !important;
            }

            &[src$="/oneWF.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 15 */
                /* One WF */
                background: _color("status", oneWF) !important;
            }

            &[src$="/published.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 16 */
                /* Published */
                background: _color("status", published) !important;
            }

            &[src$="/unpublished.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 17 */
                /* Unpublished */
                background: _color("status", unpublished) !important;
            }

            &[src$="/waiting.gif"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 18 */
                /* Waiting */
                background: _color("status", waiting) !important;
            }

            &[src$="/workinprogress.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 19 */
                /* Work In Progress */
                background: _color("status", workinprogress) !important;
            }
        }
    }

    .x-grid3-header {
        /* Header bar (contains column names) */
        display: none;
    }

    .x-grid3-body {
        /* Contains the Actual List !! */
        height: 100% !important;
    }

    .x-grid3-scroller {
        /* Another List Container */
        height: 100% !important;
        width: calc(100% - 10px) !important;

        .modal-editorialpicker & {
            height: calc(100% - 24px) !important;
        }

        #JahiaGxtUserGroupSelect & {
            height: calc(100% - 24px) !important;
        }

        body[data-indigo-gwt-panel-tab="JahiaGxtSidePanelTabs__JahiaGxtPagesTab"] & {
            width: calc(100% - 25px) !important;
        }

        body[data-indigo-gwt-panel-tab="JahiaGxtSidePanelTabs__JahiaGxtCreateContentTab"] & {
            width: 100% !important;
        }

        body[data-edit-window-style="settings"] &,
        .x-viewport-adminmode &,
        .x-viewport-dashboardmode & {
            height: calc(100% - 14px) !important;
            padding-left: 1px;
        }
    }

    .x-grid3-viewport {
        /* Another container */
        height: 100% !important;
    }

    .x-tree3-el-jnt,
    .x-tree3-node-joint {
        pointer-events: all;
    }


    .x-tree3-node-joint[style*='-66px'] {
        // Closed
        background: url( _icon("navNext", "grey")) no-repeat top 1px center!important;
        background-size: 10px!important;
    }

    .x-tree3-node-joint[style*='-34px'] {
        // Opened
        background: url( _icon("arrowDown", "grey")) no-repeat top -3px center!important;
        background-size: 19px !important;
    }

    .x-grid3-row {
        /* List Item */
        height: _theme($ROW--HEIGHT) !important;
        width: 100% !important;
        border: none;

        background: _theme($ROW--BG, $SIDE-PANEL) !important;

        body[data-edit-window-style="settings"] &,
        .x-viewport-adminmode &,
        .x-viewport-dashboardmode & {
            background: transparent !important;
        }

        body[data-INDIGO-PICKER-SEARCH="open"] & {
            background-color: _theme($ROW--BG, $PICKER-SEARCH) !important;
        }


        &.x-grid3-row-over {
            /* Line Over */
            background: _theme($ROW--BG---HOVER, $SIDE-PANEL) !important;

            .x-tree3-node-icon {
                @extend %tree_line_icon_hover !optional;
            }

            .x-grid3-td-locked {
                background: transparent !important;
            }

            .x-grid3-td-displayName,
            .gwt-content-label,
            .x-grid3-col-name,
            .x-tree3-node-text,
            .x-tree3-node-text > span,
            .x-grid3-col-path {
                color: _theme($ROW--COLOR---HOVER, $SIDE-PANEL) !important;

                // Padding not dealt with in best manner ...
                .x-viewport-adminmode &,
                .x-viewport-dashboardmode & {
                    padding-right: 0 !important; // Make space for More options button
                }

                body[data-edit-window-style="settings"] &,
                .x-viewport-adminmode &,
                .x-viewport-dashboardmode & {
                    color: _color("primary") !important;
                }

                &::after {
                    background-image: url($TREE--MORE_OPTIONS--ICON---HOVER);
                    opacity: 1;
                    background-color: _theme($ROW--BG---HOVER, $SIDE-PANEL) !important;
                }
            }

            .x-grid3-col-size,
            .x-grid3-col-primaryTypeLabel {
                color: _theme($ROW--COLOR---HOVER, $SIDE-PANEL) !important;
            }
        }


        &.x-grid3-row-selected {
            /* Line Selected */
            background-color: _color("tertiary", normal) !important;

            body[data-edit-window-style="settings"] &,
            .x-viewport-adminmode &,
            .x-viewport-dashboardmode & {
                background-color: transparent !important;
                background: linear-gradient(to left, rgba(0, 124, 176, 0.86) 1%, _color("tertiary", normal) 100%) left center !important;
            }

            .x-tree3-node-icon {
                @extend %tree_line_icon_selected !optional;
            }

            .x-grid3-td-locked {
                background: transparent !important;
            }

            .x-grid3-td-displayName,
            .gwt-content-label,
            .x-grid3-col-name,
            .x-grid3-col-path,
            .x-tree3-node-text,
            .x-tree3-node-text > span {
                color: _theme($ROW--COLOR---SELECTED, $SIDE-PANEL) !important;

                .x-viewport-adminmode &,
                .x-viewport-dashboardmode & {
                    padding-right: 0 !important; // Make space for More options button
                }

                body[data-INDIGO-PICKER-SEARCH="open"] & {
                    color: _theme($ROW--COLOR---SELECTED, $SIDE-PANEL) !important;
                }

                body[data-edit-window-style="settings"] &,
                .x-viewport-adminmode & {
                    @include text(_size("small"), _theme($ROW--COLOR---SELECTED, $SIDE-PANEL) !important, _weight("normal") !important);
                }

                &::after {
                    background-image: url($TREE--MORE_OPTIONS--ICON---SELECTED);
                    opacity: 1;
                    background-color: _color("tertiary", normal) !important;
                }

                &.readOnly {
                    color: _color("primary", b)!important;
                }
            }

            .x-grid3-col-size,
            .x-grid3-col-primaryTypeLabel {
                color: _theme($ROW--COLOR---SELECTED, $SIDE-PANEL) !important;
            }

            &.x-grid3-row-over {
                /* Line Hover on Selected */
                background: _color("tertiary", normal) !important;

                .x-tree3-node-icon {
                    @extend %tree_line_icon_selected_hover !optional;
                }

                .x-grid3-col-size,
                .x-grid3-col-primaryTypeLabel {
                    line-height: 20px;
                    @include text(_size("small") !important, _theme($ROW--COLOR, $SIDE-PANEL) !important, _weight("extralight") !important);
                }

                .x-grid3-td-displayName,
                .gwt-content-label,
                .x-grid3-col-name,
                .x-grid3-col-path,
                .x-tree3-node-text,
                .x-tree3-node-text > span {
                    color: _theme($ROW--COLOR---SELECTED-HOVER, $SIDE-PANEL) !important;

                    &::after {
                        background-image: url($TREE--MORE_OPTIONS--ICON---SELECTED_HOVER);
                        background-color: _color("tertiary", normal) !important;
                    }
                }
            }
        }
    }

    .x-grid3-td-displayName,
    .gwt-content-label {
        /* List Item Text Label */
        @include text(13px, _theme($ROW--COLOR, $SIDE-PANEL), _weight("light"));

        body[data-INDIGO-PICKER-SEARCH="open"] & {
            color: _theme($ROW--COLOR, $SIDE-PANEL) !important;
        }

        pointer-events: none;

        &::after {
            position: absolute;
            pointer-events: all;
            margin-top: -23px;
            background-image: none;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 10px 2px;
            text-indent: -50000px;
            display: block;
            width: 28px;
            height: _theme($ROW--HEIGHT);
            opacity: 1;
            right: 0;
            content: "More";
            top: 23px;
            background-color: transparent !important;

            #JahiaGxtPagesTab & {
                top: 26px;
                margin-top: -26px;
            }

            #JahiaGxtContentBrowseTab .x-box-item:nth-child(2) &,
            #JahiaGxtCategoryBrowseTab .x-box-item:nth-child(2) &,
            .JahiaGxtSearchTab-results & {
                margin-top: -23px;
            }

            // WOuld be better to have the button DISABLED by default, the reactivated when required ...
            .content-type-window &,
            .x-viewport-dashboardmode &,
            .x-viewport-adminmode &,
            .workflow-dashboard-engine &,
            #JahiaGxtEditEnginePanel-liveroles &,
            #JahiaGxtEditEnginePanel-editroles &,
            #JahiaGxtSettingsTab &,
            #JahiaGxtManagerLeftTree &,
            #JahiaGxtManagerTobTable & {
                display: none;
            }
        }
    }

    .x-tree3-node-text,
    .x-tree3-node-text > span,
    .x-grid3-col-name,
    .x-grid3-col-path,
    .x-grid3-col-providerKey {
        /* List Item Text Label */
        @include text(14px !important, _theme($ROW--COLOR, $SIDE-PANEL) !important, _weight("light") !important);

        body[data-INDIGO-PICKER-SEARCH="open"] & {
            @include text(_size("small") !important, _theme($ROW--COLOR, $SIDE-PANEL) !important, _weight("extralight") !important);
        }

        body[data-edit-window-style="settings"] &,
        .x-viewport-adminmode &,
        .x-viewport-dashboardmode & {
            @include text(13px !important, _theme($ROW--COLOR, $SIDE-PANEL) !important, _weight("light") !important);
        }
    }

    .x-grid3-col-size,
    .x-grid3-col-primaryTypeLabel,
    .x-grid3-col-jcr\:created,
    .x-grid3-col-jcr\:createdBy,
    .x-grid3-col-jcr\:lastModified {
        line-height: 20px;
        @include text(_size("small") !important, _theme($ROW--COLOR, $SIDE-PANEL) !important, _weight("extralight") !important);

        body[data-INDIGO-PICKER-SEARCH="open"] & {
            color: _theme($ROW--COLOR--DIMMED, $SIDE-PANEL) !important;
        }
    }

    .x-tree3-node-text {
        top: -1px;
    }

    .x-tree3-node-icon,
    .gwt-Image {
        /* List Item Icon */
        overflow: hidden;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
    }

    // List Structure
    .x-grid3-row-table {
        // Table containing actual List Item
        height: 100%;

        > tbody {
            height: 100%;

            > tr {
                height: 100%;
                position: relative;

                > td {
                    height: 100%;
                }
            }
        }

        .x-grid3-cell {
            /* Cell Containing the List Item */
            padding: 0;

            &.x-grid3-td-locked {
                width: 25px !important;
                display: block;
                right: 25px;
                top: 3px;
                position: absolute !important;
                background: transparent;
            }

            .x-grid3-cell-inner {
                // Yet another container ...
                height: 100% !important;

                .x-tree3-node {
                    // Oooh, another container !!
                    height: 100% !important;

                    .x-tree3-el {
                        // At last, the actual element !!
                        height: 100%;
                        width: auto !important;
                        padding: 2px 0 0px;

                        > img,
                        > span {
                            display: inline-block;
                            vertical-align: middle;

                            font-family: inherit;
                            color: inherit;
                            font-weight: inherit;
                            padding: inherit;
                            font-size: inherit;
                            top: -3px;
                            line-height: _theme($ROW--HEIGHT);
                        }

                        td > .x-tree3-node-icon {
                            // NOT NECCESSARY IN THIS TAB SET
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

.x-panel .x-grid3 .x-grid3-row-table { // Changed to fix table bug on workflow modal.
    width: 100% !important;
}

///////////// RICH TEXT MENU

// CKEDITOR errors
.x-form-invalid {
    border: none !important;
    background: transparent !important;
}

.wcag-panel {

    border-width: 1px;
    border: 1px solid _color("status", error);
    box-shadow: 0px 1px 5px _color("black", b);
    z-index: 9999;
    position: relative;
    background: _color("status", error);
    margin-bottom: 15px;

    .x-panel-header {
        box-sizing: border-box;
        display: block !important;
        background: _color("status", error) !important;
        border: none !important;
        padding: 3px;

        > img {
            position: relative;
            top: 3px;
            left: 2px;
        }

        .x-panel-header-text {
            line-height: 21px;
            @include text(11px, _color("secondary"), _weight("semibold"));
        }

    }

    .x-panel-toolbar {
        // Ignore button
        .x-menu-check-item {
            background: _color("secondary");
            padding: 3px 8px;
            text-decoration: none;
            text-transform: uppercase;;
            opacity: 0.9;
            @include text(_size("tiny"), _color("status", error) !important, _weight("extrabold"));

            &:hover {
                opacity: 1;
            }
        }

    }

    .x-grid3-header {
        display: table-cell !important;
        background: transparent !important;
        padding-bottom: 3px;

        .x-grid3-header {
            display: table-cell !important;

            span {
                text-transform: uppercase;
                @include text(_size("tiny"), _color("secondary", c) !important, _weight("extrabold"));
            }
        }
    }

    td.x-grid3-cell {
        display: inline-block !important;
        padding: 0 1px !important;
        border: none !important;
        background: transparent !important;

        &.x-grid3-hd-over {
            > div {
                background: rgba(255, 255, 255, 0.85) !important;
            }

            a {
                background: url( _icon("arrowDown", "grey")) no-repeat center center !important;
                width: 23px;
                background-size: 13px !important;
                opacity: 0.7;

                &:hover {
                    background-color: rgba(255, 255, 255, 0.5) !important;
                    background-size: 13px !important;
                    opacity: 1;
                }
            }

            span {
                color: _color("primary") !important;
            }
        }

        div {
            text-align: left;;
            @include text(10px, _color("secondary") !important, _weight("normal"));
        }

        a {
            color: _color("status", error) !important;
            background: _color("secondary");
            padding: 3px 5px;
            text-decoration: none;
            opacity: 0.9;

            &:hover {
                opacity: 1;
            }
        }

        &:last-child {
            width: auto !important;
        }
    }

    .x-grid3-row {
        overflow: hidden;

        &.x-grid3-row-selected,
        &.x-grid3-row-over,
        &.x-grid3-row-over.x-grid3-row-selected {
            background: transparent !important;
        }
    }
}

.cke {
    // CKE Rich Text Editor
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    // Need to override with weight as well as importance
    span.cke_toolgroup a {
        .cke_button_icon {

            @if (_theme($CKE--ICON-SET--LEGACY, $EDIT-ENGINE)) {
                background-image: url(_theme($CKE--ICON-SET--LEGACY, $EDIT-ENGINE)) !important;

                body[data-CKEDITOR-VERSION="4.7.1-jahia1"] & {
                    background-image: url(_theme($CKE--ICON-SET--DEFAULT, $EDIT-ENGINE)) !important;
                }
            }
        }

        &.cke_button_on {
            background: _theme($CKE--TOOL--BG---SELECTED, $EDIT-ENGINE) !important;
            border-radius: 0;
            box-shadow: none;

            &:hover,
            &:focus,
            &:active {
                background: _theme($CKE--TOOL--BG---SELECTED, $EDIT-ENGINE) !important;
                border-radius: 0;
                box-shadow: none;
            }
        }

        &.cke_button_off,
        &.cke_button_disabled {
            &:hover {
                background: _theme($CKE--TOOL--BG---HOVER, $EDIT-ENGINE) !important;
                border-radius: 0;
                box-shadow: none;
            }

            &:focus,
            &:active {
                background: _theme($CKE--TOOL--BG---HOVER, $EDIT-ENGINE) !important;
                border-radius: 0;
                box-shadow: none;
            }
        }
    }

}

.cke_inner {
    // CKE container
    background: transparent !important;

    &.cke_reset.cke_maximized {
        background: #fcfcfc !important;
        padding: 8px !important;
        box-sizing: border-box;
    }
}

.cke_top {
    // CKE Toolbar Container
    width: 100% !important;
    box-sizing: border-box !important;
    background: _theme($CKE--TOOLBAR--BG, $EDIT-ENGINE) !important;
    border: none !important;
    border-bottom: 1px solid _theme($CKE--TOOLBAR--BORDER, $EDIT-ENGINE) !important;
    box-shadow: none !important;
    padding: 0 0 0 2px !important;
}

.cke_toolgroup {
    // CKE Tool Group
    border: none !important;
    background: _theme($CKE--TOOLGROUP--BG, $EDIT-ENGINE) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 10px !important;

    transition: _transition("all", "quick") !important;

    &:hover {
        background: _theme($CKE--TOOLGROUP--BG---HOVER, $EDIT-ENGINE) !important;
    }
}

.cke_panel {
    background: _color("white") !important; /* TO THEME */
    border: 6px solid _color("primary", c) !important; /* TO THEME */
    border-radius: 0 !important;
    margin-top: 8px !important;
}

// CKE Editor
.cke_combopanel,
.cke_menu_panel {
    border-width: 1px !important;
    border-color: #d0d0d0 !important; /* TO THEME */
    margin-top: 4px !important;
}

.cke_combo_label {
    // CKE Combo Label
    text-shadow: none !important;
}

.cke_combo_button {
    // CKE Combo Button
    border: none !important;
    background: _theme($CKE--COMBO--BG, $EDIT-ENGINE) !important;
    box-shadow: _theme($CKE--COMBO--SHADOW, $EDIT-ENGINE) !important;
    border-radius: 0 !important;
    padding: 4px !important;

    &:hover {
        background: _theme($CKE--COMBO--BG---HOVER, $EDIT-ENGINE) !important;
        box-shadow: _theme($CKE--COMBO--SHADOW---HOVER, $EDIT-ENGINE) !important;
    }
}

.cke_combo_text,
.cke_button_label {
    // CKE Combo Label
    text-shadow: none !important;
}

.cke_button_label,
.cke_combo_text {
    color: _theme($CKE--BUTTON-LABEL--COLOR, $EDIT-ENGINE) !important;

    &:hover {
        color: _theme($CKE--BUTTON-LABEL--COLOR---HOVER, $EDIT-ENGINE) !important;
    }
}


.cke_contents {
    // CKE Content Container
    box-shadow: _theme($CKE--CONTENTS--SHADOW, $EDIT-ENGINE);
    border: 1px solid _theme($CKE--CONTENTS--BORDER, $EDIT-ENGINE) !important;
}

// CKEditor readOnly mode
div[data-sel-content-editor-field-readonly='true'] .cke_contents {
    border: 1px solid #F6FAFC !important;
}

div[data-sel-content-editor-field-readonly='true'] .cke_wysiwyg_frame {
    background: #F6FAFC;
}

div[data-sel-content-editor-field-readonly='true'] .cke_combo_button,
div[data-sel-content-editor-field-readonly='true'] .cke_combo_button:hover,
div[data-sel-content-editor-field-readonly='true'] .cke_contents {
    box-shadow: none !important;
}

div[data-sel-content-editor-field-readonly='true'] .cke_button_arrow {
    border-top: 3px solid #cccccc !important;
}

div[data-sel-content-editor-field-readonly='true'] .cke_button_disabled {
    cursor: not-allowed;
}

.cke_bottom {
    // CKE Footer Container
    border: none !important;
    background: _theme($CKE--PATH--BG, $EDIT-ENGINE) !important;
}

.cke_resizer {
    // CKE Resizer button
    display: none !important;
}

.cke_path {
    // CKE Path Selector

    a.cke-path-item {
        // CKE Path Item
        text-shadow: none;
        @include text(_size("small"), _theme($CKE--PATH--COLOR, $EDIT-ENGINE) !important, _weight("extralight"));
    }
}

.cke_dialog_ui_checkbox {
    label {
        @include text(_size("small"), _color("primary"), _weight("extralight"));
    }
}

// CKEditor Dialogues

// Modal Mask
.cke_dialog_background_cover {
    background: $MODAL--BG--COLOUR !important; /* TO THEME */
    opacity: 1 !important;
    z-index: $ZINDEX--MODAL---MASK\:CKE_EDITOR !important;
}

// Dialogue Container
.cke_dialog {
    background: $RICH_TEXT_EDITOR--DIALOGUE--BG--COLOUR !important; /* TO THEME */
    padding: 20px !important;
    display: block;
    top: 30px !important;

    .cke_dialog_ui_text input {
        padding: 3px 4px !important; // Fix for Image Properties modal inputs
    }

    .FlashPreviewBox,
    .ImagePreviewBox {
        border: none !important;
        padding: 0 !important;
        background: $RICH_TEXT_EDITOR--DIALOGUE--PREVIEW--BG--COLOUR !important; /* TO THEME */
    }

    .cke_btn_locked,
    .cke_btn_reset {
        background-color: $RICH_TEXT_EDITOR--DIALOGUE--BUTTON_ICON--BG--COLOUR !important; /* TO THEME */
        padding: 3px 2px !important;
        background-position: center !important;
    }

    td.cke_dialog_ui_hbox_last {
        float: left;
        margin-right: 10px;
    }

    .cke_dark_background {
        @include text(28px, $RICH_TEXT_EDITOR--DIALOGUE--PREVIEW_CHARACTERS--FONT--COLOUR !important, _weight("extralight")); /* TO THEME */
        border: none !important;
    }

    // ANother Dialigue Container
    .cke_dialog_body {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;

        // Dialogue CLose button
        .cke_dialog_close_button {
            display: none !important;

            // Button Label
            .cke_label {
                display: none;
            }
        }
    }

    // Dialogue Title Bar
    .cke_dialog_title {
        text-shadow: none;
        border: none;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        margin-bottom: 10px;
        pointer-events: none !important; // disables the drag feature of popup

        @include text(_size("big"), $RICH_TEXT_EDITOR--DIALOGUE--TITLE--FONT--COLOUR, _weight("extralight"), _font("raleway")); /* TO THEME */
    }

    // Tabs
    .cke_dialog_tabs {
        position: relative;
        left: 0;
        background: transparent;
        height: auto;
        margin: 0;
        box-sizing: border-box;
        display: block;
        width: 100%;
        margin-bottom: 10px;

        a {
            height: auto;
            line-height: normal;
            padding: 0;
            border: none;
            border-radius: 0;
            background: transparent !important;
            margin-right: 10px;
            text-transform: uppercase;

            @include text(11px, $RICH_TEXT_EDITOR--DIALOGUE--TAB--FONT--COLOUR, _weight("light")); /* TO THEME */

            &.cke_dialog_tab_selected {
                color: $RICH_TEXT_EDITOR--DIALOGUE--TAB--FONT--COLOUR---SELECTED; /* TO THEME */
                font-weight: 700;
            }

            &:hover {
                color: $RICH_TEXT_EDITOR--DIALOGUE--TAB--FONT--COLOUR---SELECTED !important; /* TO THEME */
                background: inherit !important;
            }
        }
    }

    // LABEL
    .cke_dialog_ui_labeled_label {
        width: 100px !important;
        display: inline-block !important;
        white-space: pre-wrap;
        line-height: 14px;
        vertical-align: middle;
        @include _label("normal");
    }

    .cke_dialog_ui_labeled_content {
        display: inline-block !important;
    }

    .cke_dialog_ui_input_select {
        display: block !important;
    }

    // SELECT / COMBO CONTAINER
    .cke_dialog_ui_select {
        // SELECT
        select {
            display: inline-block;
            -moz-appearance: none;
            -webkit-appearance: none;
            @include text(_size("small"), _color("primary", normal), _weight("light")); /* TO THEME */
            border: none;
            line-height: normal;
            border-radius: 0;
            box-shadow: 0px 1px 2px _color("black", a);
            background: url( _icon("arrowDown", "grey")) no-repeat right 5px center; /* OPTIMISE URL ::: css/components/_build.scss ::: 6 */
            background-color: _color("white", normal);
            padding: 7px 16px 6px 10px !important;
            font-family: "Nunito Sans", sans-serif;
            font-size: 12px;
            color: _color("primary", normal);
            font-weight: 100;
            box-sizing: border-box;
            height: 30px;
            width: auto !important;
            max-width: 100% !important;
            word-wrap: break-word;
            margin-left: 2px;

            &:focus {
                border: none;
            }
        }

    }

    // TEXT INPUT CONTAINER
    .cke_dialog_ui_input_text {
        padding: 2px;
    }

    div.cke_dialog_ui_input_text {
        width: 400px;
    }

    .cke_dialog_ui_text {
        width: 100% !important;

        input {
            border-radius: 0;
            box-shadow: none;
            border: none !important;
            @include _input(LIGHT);
        }
    }

    // Dialogue Body / Footer container
    .cke_dialog_contents {
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        display: block;
        box-sizing: border-box;
        width: 100%;

        tr {
            margin-bottom: 1px;
            display: table-row;
        }
    }

    // Dialogue Body Container
    .cke_dialog_contents_body {
        margin: 0;
        height: 50vh !important;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        display: block;
        overflow-y: scroll;
        min-width: 540px !important;
    }

    iframe.cke_pasteframe {
        background: $RICH_TEXT_EDITOR--DIALOGUE--PREVIEW--BG--COLOUR !important; /* TO THEME */
        border-radius: 0 !important;
        border: none !important;
    }

    .cke_dialog_page_contents {

        > table {
            > tbody {
                > tr {
                    margin-bottom: 20px;
                }
            }
        }

        fieldset {
            padding: 0 !important;
            margin-top: 10px !important;

            legend {
                @include _label("normal");
            }
        }

        p,
        .cke_dialog_ui_html {
            margin: 0 0 10px 0;

            @include text(_size("normal"), $RICH_TEXT_EDITOR--DIALOGUE--PARAGRAPH--FONT--COLOUR, _weight("extralight")); /* TO THEME */

            strong {
                font-weight: _weight("bold");
                color: lighten($RICH_TEXT_EDITOR--DIALOGUE--PARAGRAPH--FONT--COLOUR, 5%); /* TO THEME */
                font-size: inherit;
                font-family: inherit;
            }
        }

        a {
            padding: 0;
            @include text(_size("normal"), $RICH_TEXT_EDITOR--DIALOGUE--LINK--FONT--COLOUR !important, _weight("normal")); /* TO THEME */

        }

        .cke_dialog_ui_button {
            padding: 0;
            margin: 0;
            border: none;
            border-radius: 0;
            box-shadow: none;
            background: transparent;
            display: block;

            // Normal Button
            span {
                background: _color("tertiary") !important; /* TO THEME */
                @include text(_size("small") !important, _color("secondary") !important, _weight("extralight") !important); /* TO THEME */
                text-shadow: none;
                padding: 4px;
                text-align: center;

                &:hover {
                    background: lighten(_color("tertiary"), 3%) !important; /* TO THEME */
                    color: lighten(_color("secondary"), 3%) !important; /* TO THEME */
                }
            }
        }
    }

    // Fix for the Advanced tab
    .cke_dialog_ui_vbox.cke_dialog_page_contents[name="advanced"] .cke_dialog_ui_vbox_child[style="padding:1px"] .cke_dialog_ui_hbox > td:not([style="width:320px"]):not([style="width:90px"]) {
        width: 100% !important;
        display: block !important;
        margin-bottom: 5px;
    }

    .cke_dialog_ui_vbox_child {
        padding: 0 !important;
        display: block;
        margin-bottom: 5px;
    }

    .cke_dialog_footer {
        border: 0;
        outline: 0;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
        text-align: left;
        margin-top: 10px;
        display: block;
    }

    .cke_dialog_ui_hbox:not(.cke_dialog_footer_buttons) .cke_dialog_ui_hbox {
        > td:not([style="width:320px"]):not([style="width:90px"]) {
            display: block !important;
            width: auto!important;
            position: relative;
        }
    }

    .cke_dialog_footer_buttons {
        display: inline-block;
        float: right;
        margin: 0;

        tbody,
        tr,
        td {
            display: inline-block;
        }

        // Reverse buttons so that OK comes first
        td {
            float: right !important;
            margin-right: 5px;
        }

        .cke_dialog_ui_hbox {
            > td {
                width: auto !important;
                display: inline-block !important;

                body:not(.ext-windows) & {
                    float: left !important;
                }
            }
        }

        .cke_dialog_ui_button {
            padding: 0;
            margin: 0;
            border: none;
            border-radius: 0;
            box-shadow: none;
            background: transparent;
            display: block;

            // Normal Button
            span {
                padding: 10px 20px !important;
                background: _color("tertiary") !important; /* TO THEME */
                @include text(_size("normal") !important, _color("secondary") !important, _weight("extralight") !important); /* TO THEME */
                text-shadow: none;

                &:hover {
                    background: lighten(_color("tertiary"), 3%) !important; /* TO THEME */
                    color: lighten(_color("secondary"), 3%) !important; /* TO THEME */
                }
            }

            // Cancel Button
            &.cke_dialog_ui_button_cancel {
                span {
                    padding: 10px 20px !important;
                    @extend %BUTTON--TEXT---ACTIONBAR; /* TO THEME */

                    &:hover {
                        @extend %BUTTON--TEXT---HOVER---ACTIONBAR; /* TO THEME */
                    }
                }
            }
        }
    }

    a {
        &:active,
        &:focus {
            border: none !important;
            padding: 0 !important;
        }
    }


    // CKE About POP UP Specific
    .cke_about_container {
        padding: 0;
        margin: 0;

        .cke_about_logo {
            display: none;
        }
    }

    // CKE Template List
    .cke_tpl_list {
        border: none;
        background: transparent;
        margin: 5px 0;

        a {
            display: block;
            margin: 1px 0;

            .cke_tpl_item {
                margin: 0;
                border: none;
                padding: 5px 16px;
                background-color: $RICH_TEXT_EDITOR--DIALOGUE--LIST--BG--COLOUR; /* TO THEME */
            }

            &:hover,
            &:focus,
            &:active {
                box-shadow: inset -35px 0 $RICH_TEXT_EDITOR--DIALOGUE--LIST--ICON--BG--COLOUR---SELECTED; /* TO THEME */
                background-color: $RICH_TEXT_EDITOR--DIALOGUE--LIST--BG--COLOUR---SELECTED; /* TO THEME */

                .cke_tpl_item {
                    border: none;
                    background: url($RICH_TEXT_EDITOR--DIALOGUE--LIST--ICON---SELECTED) no-repeat right 7px center;
                    background-size: 20px 20px;
                }
            }
        }
    }

    .cke_dialog_ui_checkbox {
        display: block;
        margin-top: 10px;
        vertical-align: middle;

        input {
            vertical-align: middle;
        }
    }

    .cke_tpl_preview {
        width: 100% !important;

        td {
            padding: 0;

            br {
                display: none;
            }

            span {
                @include text(_size("normal"), _color("primary", g), _weight("normal")); /* TO THEME */
            }

            .cke_tpl_title {
                display: none;
            }
        }
    }

    .x-form-invalid {
        border: none !important;
        background: none !important;
    }
}


/* BROWSER FIXES ( Actually over rides of GXT fixes ) */
.ext-strict .ext-gecko .x-small-editor .x-form-text,
.ext-strict .ext-webkit .x-small-editor .x-form-text {
    height: auto !important;
}

.ext-strict .ext-gecko .x-small-editor .x-form-field-wrap .x-form-trigger {
    height: 24px !important;
}

/* Modal Mask */
.x-modal {
    // background: radial-gradient(ellipse at bottom right, _color("primary", f) 0%, _color("primary") 70%);  // check on other modals.
    background: _theme($MODAL-SOLID--BG---LEGACY, $APP);
    opacity: 1;
    z-index: 999 !important;
    position: fixed !important;

    body[data-INDIGO-IMAGE-PREVIEW="open"] & {
        z-index: $ZINDEX--MODAL---MASK\:IMAGE_PREVIEW;
    }

    display: none;

}

/* Loading Loader */
.x-masked {
    > div {
        opacity: 0;
    }

    &::before {
        content: _dictionary("loading");
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url(../images/loader.svg) no-repeat center center transparent; /* OPTIMISE URL ::: css/components/_build.scss ::: 7 */
        font-size: 0px;
    }

    body[data-indigo-sidepanel-pinned="true"] &,
    body[data-sitesettings="true"] &,
    body[data-indigo-app="admin"] &,
    body[data-indigo-app="dashboard"] & {

        &::before {
            background: url(../images/loader_dark.svg) no-repeat center center transparent; /* OPTIMISE URL ::: css/components/_build.scss ::: 8 */
        }
    }
}

// Change loader when loading a tree.
.x-treegrid.x-masked:before {
    background: url(../images/loader_dark.svg) no-repeat center center; /* OPTIMISE URL ::: css/components/_build.scss ::: 9 */
    background-color: transparent !important;
    position: initial !important;
}

/* All Dialogues, popups, etc, etc ... */
// BASIC STRUCTURE RESET
.x-window-tl,
.x-window-tr,
.x-window-tc,
.x-window-ml,
.x-window-mr,
.x-window-mc,
.x-window-body,
.x-window-bl,
.x-window-br,
.x-window-bc,
.x-window-footer {
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.x-window-header {
    padding: 0 !important;
    pointer-events: none; // Remove the draggable feature of dialogue
    margin-bottom: 5px;

}

.x-window-draggable {
    .x-window-header-text {
        cursor: auto !important;
        pointer-events: none !important;
    }
}


/* Specific to Dialogues (ie. alert windows ) */
.x-window-dlg {
    .info-publication-list {
        > li {
            margin: 10px 0 10px 5px;
            border-left: 3px solid #c4c4c4;
            padding: 0 5px 3px;
        }
    }

    .info-publication-label {
        display: block;
        font-size: 13px;
    }

    .info-publication-path {
        font-size: 11px;
    }

    .x-toolbar-cell {
        // YES BUTTON
        &:nth-child(1) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 20 */
            @include _button(".x-btn", "ACTIONBAR---SUGGESTED", "remove-icons");
        }

        // NO BUTTON
        &:nth-child(2) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 21 */
            @include _button(".x-btn", "ACTIONBAR---SECONDARY", "remove-icons");
        }
    }


    margin-top: -32px; // Trying to offset the increase in height of dialogue due to extra large title.

    .x-window-header-text {
        @include text(32px, _color("primary"), _weight("extralight"), _font("raleway")); /* TO THEME */
        display: block !important;
    }

    // ICONS
    .ext-mb-warning,
    .ext-mb-question,
    .ext-mb-info {
        display: none;
    }

    // CONTENT
    .ext-mb-text {
        @include text(_size("normal"), _color("primary", b), _weight("extralight")); /* TO THEME */
    }

    // ACTION BAR
    .x-panel-btns {
        margin-top: 20px;
    }

    // Have to use an x-clear DIV to act as the modal mask.
    &.x-window-plain {
        .x-window-tl,
        .x-window-ml {
            position: relative;
            z-index: $ZINDEX--EDIT_ENGINE--DIALOGUE;
        }

        .x-panel-btns {
            .x-panel-fbar {
                position: relative;
                z-index: $ZINDEX--EDIT_ENGINE--DIALOGUE;
            }
        }
    }

}

// Popup image preview (used in pickers)
#JahiaGxtImagePopup {
    z-index: 999910 !important;

    .indigo-modal-mask {
        background: linear-gradient(to right bottom, whitesmoke 50%, #e5e4e4 100%) !important;
    }

    .gwt-HTML {
        img {
            height: auto !important;
        }
    }

    .x-window-tl,
    .x-window-bwrap {
        width: auto !important;
        border: none !important;
        background: transparent !important;
    }

    .x-window-header {
        pointer-events: all;
    }

    .x-window-body {
        height: auto !important;
    }

    .x-resizable-handle {
        display: none;
    }

    .x-tool-refresh {
        display: none;
    }

    .button-save {
        display: none !important;
    }

    .x-window-header {
        .x-panel-toolbar {
            display: block;

            .x-tool-close {
                background: url( _icon("closeLarge", "grey")) no-repeat left top 2px; /* OPTIMISE URL ::: css/components/_build.scss ::: 10 */
                background-size: 14px;
                width: auto;
                height: 25px;
                opacity: 0.8;
                display: block;
                position: fixed;
                top: 20px;
                left: 20px;
                padding-left: 19px;

                &:before {
                    content: "Close Preview";
                    display: block;
                    width: 100%;
                    font-size: 14px;
                    color: _color("tertiary", normal);
                }
            }
        }
    }

    &:after {
        content: '';
        background: linear-gradient(to right bottom, whitesmoke 50%, #e5e4e4 100%) !important;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
}


/* Sliders */
.x-slider-horz, .x-slider-horz .x-slider-end, .x-slider-horz .x-slider-inner {
    background: none !important;
}

.x-slider-horz .x-slider-thumb {
    background: _color("secondary", e); /* TO THEME */
    border-radius: 100%;
    width: 12px;
    height: 12px;
    top: 5px;

    &:hover {
        background: _color("primary", c); /* TO THEME */
    }
}

.x-slider-end::before {
    content: "Slider";
    text-indent: -50000px;
    display: block;
    height: 3px;
    background: _color("secondary", d); /* TO THEME */
    position: absolute;
    top: 10px;
    width: 100%;
}

/* SHOULD SIMPLIFY ALOT OF CODE WHEN REDOING edit-modes, etc ... */

.x-panel-body {
    border: none !important;
    background: transparent !important;
}

.x-border-layout-ct {
    background: none;
}


.x-border-panel {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

.x-panel-tl,
.x-panel-bl {
    display: none;
}

.x-panel-ml,
.x-panel-mr,
.x-panel-mc {
    background: none;
    border: none;
    padding: 0;
}

.x-form-focus, textarea.x-form-focus {
    border: none;
}

.arrow-double-right,
.arrow-double-left,
.arrow-right,
.arrow-left {
    background: no-repeat center center !important;
    background-size: 16px !important;
    opacity: 0.8;
    padding: 3px 0;
    width: 30px !important;
    height: 25px !important;

    &:hover {
        opacity: 1;
    }
}

.arrow-double-right {
    background-image: url( _icon("navLast", "grey")) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 11 */
}

.arrow-right {
    background-image: url(../images/icons/icon_arrow_right_single_grey@X2.png) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 20 */
}

.arrow-double-left {
    background-image: url( _icon("navFirst", "grey")) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 21 */
}

.arrow-left {
    background-image: url(../images/icons/icon_arrow_left_single_grey@X2.png) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 22 */
}


/////////////////////////////////////////////////
// CONTENT SELECTOR /////////////////////////////
/////////////////////////////////////////////////

.x-window.content-type-window {

    height: 80%;
    top: 10% !important;

    .x-window-ml,
    .x-window-mr,
    .x-window-mc {
        height: 100% !important;
    }

    .x-window-body {
        height: calc(100% - 40px) !important;

        > .x-border-layout-ct {
            overflow: hidden !important;
            height: 100% !important;
            width: 100% !important;

            .x-grid-panel {
                height: calc(100% - 64px) !important;
                margin: 0 !important;
                top: 39px !important;
            }
        }
    }


    .x-window-tl {
        display: none;
    }

    .x-window-bwrap {
        width: 400px !important;
        height: 100%;
        padding: 28px 33px 20px !important;

    }

    .x-grid-panel {
        top: 42px !important;
        height: auto !important;
    }

    .x-resizable-handle {
        display: none;
    }

    .x-border-panel {
        height: auto !important;
    }

    .x-form-field.x-form-text {
        @include _input-search($MODAL-INPUT);
    }
}

.x-window.content-type-windowX {
    box-sizing: border-box;
    height: 80%;
    padding: 30px !important;
    top: 10% !important;
    z-index: 20000 !important;
    width: 400px !important;

    // Add padding to show input box shadow doesnt get cropped
    .x-form-field-wrap {
        padding: 1px;
    }

    // Push down the clear button because of padding
    .x-form-clear-trigger {
        top: 2px;
    }

    // Reverse action buttons
    .x-panel-fbar {

        // Move buttons to the right
        > table {
            float: right;
        }

        // Reverse the buttons
        td.x-toolbar-cell {
            float: right;

            // Add padding to separate buttons
            &:nth-child(1) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 22 */
                margin-left: 5px;
            }
        }
    }


    > .x-window-bwrap {
        background: _theme($BODY--BG, $MODAL-INPUT);
        box-shadow: _theme($BODY--BG--SHADOW, $MODAL-INPUT);
        padding: 30px;
        box-sizing: border-box;
        height: 100%;
        width: 100% !important;

        .x-window-ml {
            height: 100%;
            width: 100% !important;

            .x-window-mr {
                height: 100%;
                width: 100% !important;

                .x-window-mc {
                    height: 100%;
                    width: 100% !important;

                    .x-window-body {
                        width: 100% !important;
                        height: calc(100% - 40px) !important;
                        box-sizing: border-box;

                        > .x-border-layout-ct {
                            overflow: hidden !important;
                            height: 100% !important;
                            width: 100% !important;

                            .x-grid-panel {
                                height: calc(100% - 64px) !important;
                                margin: 0 !important;
                                top: 39px !important;
                            }
                        }

                        .x-form-field.x-form-text {
                            padding: 2px;

                            img {
                                top: 2px;
                            }

                            @include _input-search($MODAL-INPUT);
                        }
                    }

                    .x-window-bbar {
                        width: 100% !important;
                    }
                }
            }
        }
    }

    // Disable resize ability
    .x-resizable-handle {
        display: none;
    }

    .x-window-header {
        display: none;
    }

    .x-panel-fbar .x-toolbar-cell:nth-child(1) {
        @include button("ACTIONBAR---SUGGESTED");
    }

    .x-panel-fbar .x-toolbar-cell:nth-child(2) .x-btn.x-btn-text-icon button {
        @include button("ACTIONBAR");
    }
}


// Content Selector on side panel.

body[data-indigo-gwt-side-panel="open"] {

    #JahiaGxtSidePanelTabs .x-tab-panel-body.x-tab-panel-body-top > .x-component.tab_createContent {
        height: calc(100% - 168px) !important;
        width: calc(100% - 20px) !important;

        .x-grid3 {
            .x-grid3-row.x-grid3-row-selected {

                .gwt-content-label,
                .x-tree3-node-text {
                    padding-right: 0 !important;
                }
            }
        }

        > .x-border-layout-ct > .x-form-field-wrap {
            height: 26px !important;
            left: 3px !important;
            width: 262px !important;
        }
    }
}


/////////////////////////////////////////////////
// DELETE CONFIRMATION MODAL/////////////////////
/////////////////////////////////////////////////

// Delete all completed jobs title
.x-window.modal-deletealljob-confirm {
    .x-window-header {
        &:before {
            content: _dictionary("confirm_delete_completed") !important;
        }
    }
}

// Exceptions for Background Jobs delete alerts
.x-window.modal-deletejob-confirm,
.x-window.modal-deletealljob-confirm {

    .x-window-header {
        margin-bottom: 0;
    }

    // Buttons
    .x-toolbar-cell {

        // // Yes
        &:nth-child(1) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 23 */
            @include button("ACTIONBAR---SUGGESTED");
        }
    }

    .x-window-bl {
        margin-top: 20px;
        z-index: 99;
        position: relative;
    }
}

div.x-window.publication-manager-engine {

    // Deal with icons here ...
    .x-tree3-node-text {
        padding-left: 2px !important;
    }

    .x-grid3-col-publicationInfos {
        padding-top: 6px;

        img {
            &[src$="/conflict.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 24 */
            &[src$="/deleted.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 25 */
            &[src$="/livemodified.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 26 */
            &[src$="/liveonly.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 27 */
            &[src$="/locked.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 28 */
            &[src$="/mandatorylanguageunpublishable.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 29 */
            &[src$="/mandatorylanguagevalid.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 30 */
            &[src$="/markedfordeletion.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 31 */
            &[src$="/modified.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 32 */
            &[src$="/multipleWF.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 33 */
            &[src$="/notpublished.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 34 */
            &[src$="/oneWF.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 35 */
            &[src$="/published.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 36 */
            &[src$="/unpublished.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 37 */
            &[src$="/waiting.gif"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 38 */
            &[src$="/workinprogress.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 39 */
                background-size: 13px;
                background-repeat: no-repeat;
                opacity: 0.8;
                width: 18px;
                padding: 0 0 0 18px !important;
                border-radius: 100%;
                height: 18px;
                background-position: top 1px center;
                background-image: url(_icon("warning", "white"));
            }

            &[src$="/conflict.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 40 */
                /* Conflict */
                background-color: _color("status", conflict);
            }

            &[src$="/deleted.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 41 */
                /* Deleted */
                background-color: _color("status", deleted);
            }

            &[src$="/livemodified.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 42 */
                /* Live Modified */
                background-color: _color("status", livemodified);
            }

            &[src$="/liveonly.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 43 */
                /* Live Only */
                background-color: _color("status", liveonly);
            }

            &[src$="/locked.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 44 */
                /* Locked */
                background-color: _color("status", locked);
            }

            &[src$="/mandatorylanguageunpublishable.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 45 */
                /* Mandatory Language Unpublishable */
                background-color: _color("status", mandatorylanguageunpublishable);
            }

            &[src$="/mandatorylanguagevalid.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 46 */
                /* Mandatory Language Valid */
                background-color: _color("status", mandatorylanguagevalid);
            }

            &[src$="/markedfordeletion.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 47 */
                /* Marked FOr Deletion */
                background-color: _color("status", markedfordeletion);
            }

            &[src$="/modified.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 48 */
                /* Modified */
                background-color: _color("status", modified);
            }

            &[src$="/multipleWF.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 49 */
                /* Multiple WF */
                background-color: _color("status", multipleWF);
            }

            &[src$="/notpublished.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 50 */
                /* Not Published */
                background-color: _color("status", notpublished);
            }

            &[src$="/oneWF.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 51 */
                /* One WF */
                background-color: _color("status", oneWF);
            }

            &[src$="/published.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 52 */
                /* Published */
                background-image: url(_icon("tick", "white"));
                background-color: _color("status", published);
                background-position: top left;
                background-size: 18px;
            }

            &[src$="/unpublished.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 53 */
                /* Unpublished */
                background-color: _color("status", unpublished);
            }

            &[src$="/waiting.gif"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 54 */
                /* Waiting */
                background-color: _color("status", waiting);
            }

            &[src$="/workinprogress.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 55 */
                /* Work In Progress */
                background-color: _color("status", workinprogress);
            }
        }
    }

    .x-tree3-node-icon {
        background-size: 23px 23px;
        background-repeat: no-repeat;
        opacity: 0.8;
        background-color: _color("secondary", c);
        padding: 2px 2px !important;
        border-radius: 4px;
        height: 21px;
        width: 21px;

        &[src$="/jnt_portletFolder.png"],/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 56 */
        &[src$="/jnt_navMenuText.png"],/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 57 */
        &[src$="/jnt_externalLink.png"],/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 58 */
        &[src$="/jnt_nodeLink.png"],/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 59 */
        &[src$="/jnt_virtualsite.png"],/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 60 */
        &[src$="/jnt_page.png"],/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 61 */
        &[src$="/jnt_folder.png"],/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 62 */
        &[src$="/jnt_groupsFolder.png"],/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 63 */
        &[src$="/jnt_contentFolder.png"],/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 64 */
        &[src$="/remoteFolder.png"] {/* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 65 */
            padding: 0 0 0 21px !important;
            border-radius: 0;
            height: 23px;
            background-color: transparent !important;
        }

        &[src$="/jnt_groupsFolder.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 66 */
        &[src$="/jnt_contentFolder.png"], /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 67 */
        &[src$="/jnt_folder.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 68 */
            background-image: url(../images/icons/tabs-files-dark@X2.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 23 */
        }

        &[src$="/remoteFolder.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 69 */
            background-image: url(../images/icons/tabs-files-shared-dark@X2.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 24 */
        }

        &[src$="/jnt_portletFolder.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 70 */
            background-image: url(../images/icons_dark/portlets.svg); /* OPTIMISE URL ::: css/components/_build.scss ::: 25 */
            opacity: 0.5;
            background-size: 21px;
            background-position: center center;
        }

        &[src$="/jnt_page.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 71 */
            background-image: url(../images/tabs-pages-dark@X2.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 26 */
        }

        &[src$="/jnt_virtualsite.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 72 */
            background-image: url(../images/icons/tabs-site-dark@X2.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 27 */
        }

        // Internal link
        &[src$="jnt_nodeLink.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 73 */
            background-image: url(../images/icons/tabs-placeholder-black@X2.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 28 */
        }

        // External link
        &[src$="jnt_externalLink.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 74 */
            background-image: url(../images/icons/tabs-placeholder-black@X2.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 29 */
        }

        // Menu link
        &[src$="jnt_navMenuText.png"] { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 75 */
            background-image: url(../images/icons/tabs-placeholder-black@X2.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 30 */
        }
    }

    .x-grid3-check-col-disabled {
        opacity: 0;
    }

    .x-grid3 .x-grid3-row {

        &.x-grid3-row-selected {
            background: transparent !important;

            .x-tree3-node-text {
                color: _color("primary") !important;
            }

            .markedForDeletion {
                color: _color("primary") !important;
            }
        }

        &.x-grid3-row-selected.x-grid3-row-over {
            background: _color("secondary", a) !important;
        }
    }

    .indigo-modal-mask {
        display: none;
    }

    .x-window-header {
        .x-panel-toolbar {
            display: none;
        }

        .x-window-header-text {
            display: block;
            color: #5c6164;
        }
    }



    .x-tool-close {
        display: none;
    }

    > .x-window-tl,
    > .x-window-bwrap {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
    }

    > .x-window-bwrap {

        .x-window-ml,
        .x-window-mr,
        .x-window-mc,
        .x-window-body {
            height: 100% !important;
        }

        .x-grid-panel {
            height: 100% !important;
            overflow: hidden;
        }
    }

    .x-grid3-header {
        width: 100% !important;

        > .x-grid3-header-inner {
            width: 100% !important;

            > .x-grid3-header-offset {
                width: 100% !important;

                > .x-grid3-hh {
                    border: none !important;
                    margin: 0 !important;
                    width: 100% !important;

                    > table {
                        width: 100% !important;
                    }
                }
            }
        }
    }

    .x-grid3-scroller {
        width: 100% !important;

        > .x-grid3-body {
            width: 100% !important;

            > div > table {
                width: 100% !important;
            }
        }
    }

    @if ($MODAL-STYLE == "fullscreen") {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: _color("secondary", normal) !important;

        > .x-window-bwrap {
            padding: 0 73px 10px 73px !important;
            height: calc(100% - 182px);
        }

        .x-panel-fbar {
            display: block;
            position: fixed;
            background: #5c6164;
            border-top: 1px solid #444749;
            box-shadow: inset 3px 0px 16px _color("black", b);
            box-sizing: border-box;
            left: -30px;
            width: calc(100% + 60px) !important;
            bottom: -30px;
            height: 109px;
            padding: 19px 50px;
        }

        > .x-window-tl {
            z-index: 9999;
            padding: 40px 72px 10px 72px !important;
        }

    } @else if ($MODAL-STYLE == "floating") {
        position: fixed !important;
        left: 100px !important;
        top: 100px !important;
        width: calc(100% - 200px) !important;
        height: calc(100% - 200px) !important;
        background: _color("secondary", normal) !important;
        box-shadow: 0px 0px 20px 20px _color("primary", b);

        > .x-window-bwrap {
            padding: 18px 30px 56px !important;
            height: calc(100% - 66px);
        }

        + .x-modal {
            display: block;
            background: _theme($MODAL-MASK--BG);
        }

        .x-panel-fbar {
            display: block;
            position: absolute;
            border-top: 1px solid _theme($MODAL--DIVIDER, "LIGHT");
            box-sizing: border-box;
            left: 0;
            width: 100% !important;
            bottom: 0;
            height: 109px;
            padding: 10px;
            height: auto;
        }

        > .x-window-tl {
            z-index: 9999;
            padding: 30px 30px 14px !important;
            border-bottom: 1px solid _theme($MODAL--DIVIDER, "LIGHT") !important;
        }

        .x-window-header {
            padding: 0 !important;
            @include text(_size("medium"), _color("secondary"), _weight("semibold"));
            text-transform: uppercase;
        }

        .x-grid3-header {
            .x-component {
                @include text(_size("small"), _theme($MODAL--COLULMN---HEADER), _weight("light") !important);
                text-transform: none;
            }
        }

        .x-grid3 .x-tree3-node-text {
            color: $TREE--ROW--FONT--COLOUR---UP!important;
        }

        .x-grid3 .x-grid3-row-over {

            .x-tree3-node-text {
                color: _theme($ROW--COLOR---HOVER, $SIDE-PANEL) !important;
            }

            &:not(.x-grid3-row-selected) {
                .x-tree3-node-joint[style*='-66px'] {
                    // Closed
                    background: url(_icon("navNext", "white")) no-repeat top 1px center !important;
                    background-size: 10px !important;
                }

                .x-tree3-node-joint[style*='-34px'] {
                    // Opened
                    background: url(_icon("arrowDown", "white")) no-repeat top -3px center !important;
                    background-size: 19px !important;
                }
            }
        }
    }
}

.x-window.trashboard-engine {

    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;

    .x-window-header {
        .x-panel-toolbar {
            display: block;
            position: fixed;
            background: #5c6164;
            border-top: 1px solid #444749;
            box-shadow: inset 3px 0px 16px _color("black", b);
            box-sizing: border-box;
            left: -30px;
            width: calc(100% + 60px) !important;
            bottom: -30px;
            height: 109px;
        }

        .x-window-header-text {
            display: block;
            color: #5c6164;

            @include text(_size("big"), _color("primary"), 100, _font("raleway"));
        }
    }

    .x-tool-close {
        width: auto !important;
        height: auto !important;
        background: #00a7ed !important;
        @include text(_size("normal"), _color("secondary", normal), _weight("extralight"));
        padding: 8px 15px !important;
        position: absolute;
        right: 52px;
        top: 20px;
        color: _color("secondary", normal) !important;

        &:before {
            content: _dictionary("done");
        }
    }


    > .x-window-tl,
    > .x-window-bwrap {
        width: 100% !important;
    }

    > .x-window-tl {
        z-index: 9999;
        padding: 40px 72px 10px 72px !important;
    }

    > .x-window-bwrap {
        padding: 0 73px 10px 73px !important;
    }

    .x-grid3-cell-inner {
        padding: 0 !important;
        line-height: 25px !important;
    }

    .x-grid3-row.indigo-opened + div {
        margin-bottom: 20px;
    }

    .x-grid3 {

        .x-grid3-header {
            display: table-cell;
            background: transparent;

            .x-component {
                left: -12px;
            }

            .x-grid3-td-displayName {
                .x-component {
                    left: -3px;
                }
            }
        }
    }

}

.x-panel.workflow-dashboard-engine,.x-window.publication-window {

    width: 100% !important;
    height: 100% !important;
    left: 56px !important;
    top: 0 !important;

    @include _button(".button-close", "ACTIONBAR", "remove-icons");
    @include _button(".button-no", "ACTIONBAR", "remove-icons");
    @include _button(".button-cancel", "ACTIONBAR", "remove-icons");
    @include _button(".button-yes", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-publish", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-submit", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-create", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-ok", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-save", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-preview", "BUTTON_DISCREET", "remove-icons");
    @include _button(".button-incontext-preview", "BUTTON_DISCREET", "remove-icons");
    @include _button(".button-details", "BUTTON_DISCREET", "remove-icons");
    @include _button(".button-abort", "WARNING", "remove-icons");

    .x-panel-header {
        .x-panel-toolbar {
            display: block;
            position: fixed;
            background: #5c6164;
            border-top: 1px solid #444749;
            box-shadow: inset 3px 0px 16px _color("black", b);
            box-sizing: border-box;
            left: -30px;
            width: calc(100% + 60px) !important;
            bottom: -30px;
            height: 109px;
        }

        .x-panel-header-text {
            display: block;
            color: #5c6164;

            @include text(_size("big"), _color("primary"), 100, _font("raleway"));
        }
    }

    > .x-panel-bwrap {
        width: 100% !important;
        padding: 0  !important;
        .x-panel-body {
            width: 100% !important;
        }
    }

    .x-grid3-cell-inner {
        padding: 0 !important;
        line-height: 25px !important;
    }

    .x-grid3-row.indigo-opened + div {
        margin-bottom: 20px;
    }

    .x-grid-panel {
        width: 100% !important;
    }

    .x-grid3 {
        width: 100% !important;
        .x-grid3-header {
            display: table-cell;
            background: transparent;
            width: 100% !important;
            .x-component {
                left: -12px;
            }

            .x-grid3-td-displayName {
                .x-component {
                    left: -3px;
                }
            }
        }
        .x-grid3-row {
            height: 27px !important;
        }
    }

}

.x-window.compare-engine,
.x-window.content-incontext-preview,
.x-window.content-preview {
    .x-panel-toolbar {
        display: block !important;
    }

    .x-window-header {
        .x-window-header-text {
            display: block !important;
            color: #5c6164;
        }
    }

    width: 100% !important;

    > .x-window-tl {
        z-index: 9999;
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
    }

    > .x-window-bwrap {
        overflow: visible !important;
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .x-window-body {
        overflow: visible !important;
    }

    .indigo-modal-mask {
        background: _color("secondary", normal) !important;
    }
}

.x-window.customized-preview,
.x-window.content-export,
.x-window.content-import {

    .x-panel-toolbar {
        display: block !important;
    }

    .x-window-header {
        .x-window-header-text {
            display: block !important;
            color: #5c6164;
        }
    }

    .x-form-element > .x-component {
        width: unset !important
    }

    > .x-window-tl,
    > .x-window-bwrap {
        width: 100% !important;
    }

    > .x-window-tl {
        padding: 20px 30px 0px 30px !important;
    }

    .x-window-tbar {
        width: 100% !important;
    }

    .x-panel-fbar .x-toolbar-cell:nth-child(1) {
        margin: 0 !important;
    }

    .button-close,
    .button-cancel {
        margin-right: 5px !important;
    }
}

.x-window.content-export,
.x-window.content-import {
    .x-panel-toolbar {
        display: none !important;
    }
}

.x-window.trashboard-engine {

    .indigo-modal-mask {
        background: _color("secondary", normal) !important;
    }

    .x-window-header {
        .x-window-header-text {
            display: block !important;
            color: #5c6164;
        }
    }

    > .x-window-tl,
    > .x-window-bwrap {
        width: 100% !important;
        border: none !important;
    }

    .x-grid3 {

        .x-grid3-header {
            .x-grid3-td-displayName {
                .x-component {
                    left: -33px;
                }
            }
        }
    }
}

.x-window.engine-window {
    &::before {
        display: none !important;
    }

    #JahiaGxtContentEngine,
    #JahiaGxtCreateContentEngine {
        &::before {
            display: block;
            position: fixed;
            width: 290px;
            left: 46px;
            top: 37px;
            z-index: 99999;

            @include text(_size("big"), _color("primary", normal), _weight("extralight"))
        }
    }

    #JahiaGxtContentEngine {
        &:not(.hide-headers) {
            &::before {
                content: _dictionary("edit_engine");
            }
        }
    }

    #JahiaGxtCreateContentEngine {
        &::before {
            content: _dictionary("edit_engine_create");
        }
    }

    > .x-window-tl {
        z-index: 9999;
        border: none !important;
        background: transparent !important;
    }

    > .x-window-bwrap {
        z-index: 9;
        border: none !important;
        top: 0;
        background: linear-gradient(to bottom, #DBDBDB 1%, #d5d5d5 100%) !important;
    }

    .x-tool-restore {
        display: none;
    }

    .x-window-header {
        pointer-events: all;

        img {
            display: block !important;
        }
    }
}


.x-window {
    @include _button(".button-right", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-left", "ACTIONBAR---SUGGESTED", "remove-icons");

    @include _button(".button-close", "ACTIONBAR", "remove-icons");
    @include _button(".button-no", "ACTIONBAR", "remove-icons");
    @include _button(".button-cancel", "ACTIONBAR", "remove-icons");
    @include _button(".button-yes", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-publish", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-submit", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-exportziplive", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-exportxml", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-exportzip", "ACTIONBAR---SUGGESTED", "remove-icons");

    @include _button(".button-create", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-ok", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-save", "ACTIONBAR---SUGGESTED", "remove-icons");
    @include _button(".button-preview", "BUTTON_DISCREET", "remove-icons");
    @include _button(".button-incontext-preview", "BUTTON_DISCREET", "remove-icons");
    @include _button(".button-details", "BUTTON_DISCREET", "remove-icons");
    @include _button(".button-abort", "WARNING", "remove-icons");

    .x-component {
        // Move this to the delete modals ...
        color: _color("primary", b);
    }

    .x-grid3-header {
        .x-component {
            font-size: 11px;
        }
    }

    > .x-window-tl,
    > .x-window-bwrap {
        position: relative !important;
        z-index: 99;
        background: _theme($MODAL--BG, LIGHT) !important;
        width: 460px !important;
        margin: 0 auto;
        box-sizing: border-box;
        border: 1px solid _color("secondary", b) !important;
    }

    > .x-window-tl {
        padding: 20px 30px 10px 30px !important;
        border-bottom: none !important;
    }

    > .x-window-bwrap {
        padding: 0 33px 20px !important;
        border-top: none !important;
    }

    .x-form-field-wrap {
        width: 100% !important;
    }

    textarea {
        padding: 10px !important;
        box-sizing: border-box;
        background: #FFF;
        border: none !important;
        background: radial-gradient(ellipse at bottom right, _color("secondary", normal) 0%, _color("white", normal) 70%) !important;
        margin: 1px;
        width: calc(100% - 2px) !important;
        box-shadow: 0px 1px 2px _color("black", a);
        color: _color("primary");

        &:hover {
            color: _color("primary");
        }
    }

    > .x-resizable-handle {
        display: none;
    }

    .x-panel-toolbar {
        display: none;
    }

    .x-panel-fbar {
        width: auto !important;

        .x-toolbar-ct {
            > tbody {
                float: right;
            }
        }

        .x-toolbar-cell {
            float: right;

            &:nth-child(1) {
                margin-left: 5px;
            }
        }
    }


    .x-window-header {
        padding: 0 !important;
        margin-bottom: 0;

        @include text(_size("big"), _theme($MODAL--HEADER, LIGHT) !important, _weight("extralight"), _font("raleway"));

        img {
            display: none;
        }

        .x-window-header-text {
            display: none;
        }
    }

    form {
        height: auto !important;
    }

    .x-window-body {
        // height: auto!important;
        width: auto !important;

        > div {
            width: auto !important;
        }
    }
}

.indigo-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    background: radial-gradient(ellipse at bottom right, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.71) 50%) !important;
    z-index: 9;
}

.x-window.delete-item-window,
.x-window.modal-deletejob-confirm,
.x-window.modal-deletealljob-confirm {
    z-index: 99999 !important;

    > .x-window-tl,
    > .x-window-bwrap {
        width: auto !important;
        min-width: 440px;
    }

    .x-window-header {
        &:before {
            content: _dictionary("confirm_delete");
        }
    }

    .x-window-body {
        height: auto !important;
    }

    .x-grid-panel,
    .x-grid3,
    .x-grid3-viewport,
    .x-grid3-scroller,
    .x-form-field-wrap {
        height: auto !important;
    }

    div.x-grid3-scroller {
        width: 100% !important;
        overflow: hidden;
    }

    .x-grid-panel {
        max-height: 61px !important;
        height: auto !important;
        overflow-y: scroll;
        margin-top: 10px;

        .x-grid3-row {
            background: #F5F5F5 !important; /* TO THEME */
            padding: 3px;
            box-sizing: border-box;

            &.x-grid3-row-over {
                background: #dfdfdf !important; /* TO THEME */
            }

            &.x-grid3-row-selected {
                .x-grid3-cell-inner {
                    color: _color("primary", normal) !important;
                }
            }

            .x-grid3-col-pagePath {
                background: url(../images/tabs-pages-dark@X2.png) no-repeat left center; /* OPTIMISE URL ::: css/components/_build.scss ::: 31 */
                background-size: 23px;
                padding-left: 25px;

                a {
                    @include text(_size("small"), _color("primary", normal), _weight("light")); /* TO THEME */
                }
            }

            .x-grid3-td-path {
                @include text(11px, _color("secondary"), _weight("extralight")); /* TO THEME */
            }
        }
    }

    .x-panel-fbar .x-toolbar-cell:nth-child(2) {
        @include button("ACTIONBAR", "remove-icons");
    }
}

/////////////////////////////////////////////////
// MODALS ///////////////////////////////////////
/////////////////////////////////////////////////

.x-window.file-uploader,
.x-window.content-import,
.x-window.content-export,
.x-window.customized-preview,
.x-window.publication-manager-engine,
.x-window.trashboard-engine,
.x-window.preview-window,
.x-window.image-crop,
.x-window.image-resize,
.x-window.image-rotate,
.x-window.download-file {
    background: transparent;
    z-index: 999999 !important;

    .x-window-bwrap {
        padding: 12px 8px 8px 8px;
        color: _color("black", d); /* TO THEME */
        background: _color("secondary", a);
    }

    .x-window-header {
        padding: 8px 0 !important;
        font-family: _font("raleway") !important;
        font-size: 32px;
        color: _color("secondary"); /* TO THEME */
        font-weight: _weight("extralight");

        .x-panel-toolbar {
            display: none;
        }
    }

    .x-panel-body.x-panel-body-noheader.x-panel-body-noborder .x-form-item {
        height: 22px;
        margin-bottom: 16px;
        border-bottom: 1px dashed _color("secondary", c); /* TO THEME */
        padding-bottom: 10px;

        label {
            position: absolute;
            left: 22px;
        }

        div.x-form-element {
            position: absolute;
            top: 3px;
        }
    }

    .x-window-body table > tbody > tr {

        > td div.x-form-field {
            font-size: 11px;
            font-weight: 600;
            color: _color("black", b); /* TO THEME */
            padding-right: 8px;
        }

        input {
            padding-right: 8px !important;
        }

    }

}


.x-window.file-uploader {
    top: calc(14vh) !important;

    .x-window-tc {
        margin-left: 8px;
        margin-bottom: -12px;
    }

    .x-window-tl {
        z-index: 99;
    }

    .x-window-header .x-window-header-text {
        display: block !important;
    }

    .x-window-body {
        height: 50vh;
    }

    .x-window-ml {
        position: relative;
        z-index: 999;
    }

    .x-panel-fbar {

        .x-toolbar-ct {
            margin-right: 40px;

            .x-toolbar-cell {
                float: none !important;
            }
        }
    }

    form {
        > div {

        }

        > table {
            display: block;

            &:last-child {
                // Presumed empty
                td:nth-child(1) {
                    display: none;
                }
            }

            > tbody {
                display: block;

                > tr {
                    display: block;

                    > td {

                        &:nth-child(1) {
                            float: right;

                            > table {
                                width: 20px !important;

                                button {
                                    height: 16px !important;

                                    img {
                                        top: 0 !important;
                                    }
                                }
                            }
                        }

                        &:nth-child(2) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 76 */
                            width: calc(100% - 20px);
                            display: block;
                        }
                    }
                }
            }
        }
    }

    .x-form-field-wrap {
        margin-right: 8px;

        .x-form-text {
            background: _color("secondary", g) !important;
            color: _color("primary") !important;
        }
    }

    .x-form-text[disabled] {
        border: none;
    }

    div[role="combobox"] img {
        background: url( _icon("arrowDown", "grey")) no-repeat center center transparent !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 33 */
    }
}


// Customized preview

.x-window.customized-preview {

    @include _button(".button-preview", "ACTIONBAR---SUGGESTED", "remove-icons");

    .button-preview {
        float: right;
    }

    .x-window-header > .x-component:first-child table tbody tr td .x-tool-close {
        background: url( _icon("closeLarge", "grey")) no-repeat center bottom; /* OPTIMISE URL ::: css/components/_build.scss ::: 34 */
        background-size: 20px;
        width: 25px;
        height: 25px;
        opacity: 0.8;
        display: block;
    }

    .x-window-header .x-panel-toolbar {
        display: block;
        pointer-events: all;
    }

    .x-window-bwrap {
        background: _color("secondary");
        padding: 12px 0 8px 0;

        .x-window-body.x-window-body-noborder {
            height: 380px !important;
        }
    }

    .x-grid3 .x-grid3-td-displayName:after {
        display: none;
    }

    .x-window-tbar .x-toolbar {
        padding-bottom: 12px;
        border-bottom: none;
    }

    .x-toolbar {
        background: _color("secondary", a); /* TO THEME */

        .my-paging-display {
            text-transform: uppercase;
        }
    }

    .x-grid3-cell-inner {
        padding-left: 9px;
    }

    .x-grid-panel .x-grid3-viewport > .x-grid3-header {
        display: block;
        background: none;
        width: calc(100% - 10px);
        box-sizing: border-box;

        .x-grid3-header-inner .x-grid3-hh > table > tbody > tr {
            display: block;
        }

        .x-grid3-header-inner .x-grid3-hh > table > tbody td {
            width: calc(25% - 12px) !important;
            pointer-events: all;
            border: none;
            background: none;
            margin-right: 10px;

            &.x-grid3-hd-over {
                background: _color("secondary", a); /* TO THEME */
            }

            div {
                width: 100% !important;
                box-sizing: border-box;
                height: auto !important;
                background: none !important;
                padding-left: 4px;
            }
        }
    }

    .x-grid-panel .x-grid3-cell {
        display: inline-block;

        > div {
            font-family: _font("nunito");
            font-size: 12px;
            color: _color("primary", a) !important;
            font-weight: 100;
        }
    }

    .x-grid-panel {

        .x-grid3-viewport > .x-grid3-header .x-grid3-header-inner .x-grid3-hh > table > tbody td { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 77 */

            div {
                .x-grid3-hd-btn {
                    background: url( _icon("arrowDown", "grey")) no-repeat center center !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 35 */
                    width: 23px;
                    background-size: 13px !important;
                    opacity: 0.7;
                }

                span {
                    text-transform: uppercase;
                    font-family: "Nunito Sans", sans-serif;
                    font-size: 11px;
                    font-weight: 500;
                }

                .x-grid3-hd-btn:hover {
                    background-color: _color("secondary", b) !important; /* TO THEME */
                    background-size: 13px !important;
                    opacity: 1;
                }

                img {
                    position: relative;
                    top: -1px;
                    opacity: 0.6;
                }

            }

        }

        .x-grid3-scroller {
            box-sizing: border-box;
            height: calc(100% - 36px) !important;
            overflow-x: hidden;
        }

        .x-grid3-row {
            padding-top: 4px;

            &.x-grid3-row-over {
                background: transparent !important;
            }

            &.x-grid3-row-selected {
                pointer-events: none;
                background: rgba(241, 241, 241, 0.8) !important; /* TO THEME */

                .x-grid3-cell > div {
                    color: _color("primary", c) !important; /* TO THEME */
                    font-weight: 700 !important;
                }

            }

        }

        .x-grid3-cell {
            width: 25% !important;
            display: inline-block;

            > div {
                font-family: "Nunito Sans", sans-serif;
                font-size: 12px;
                font-weight: 100;
            }

        }

    }


    // pager

    .x-window-body {
        > div {
            > table {
                display: block;

                > tbody {
                    display: block;

                    > tr {
                        display: block;

                        > td {
                            display: block;
                            padding-right: 2px;
                        }
                    }
                }
            }
        }

        .x-small-editor.x-toolbar.x-component.x-toolbar-layout-ct {
            width: calc(100% + 10px) !important;
            padding: 8px 16px;
            margin: 6px 0;
            border-bottom: 1px dashed _color("secondary", d) !important;
            margin-top: 4px;
            padding-top: 4px;
        }
    }

    .x-toolbar-left-row .x-toolbar-cell .x-btn-text {
        background: none !important;
    }

    .x-small-editor.x-toolbar.x-component.x-toolbar-layout-ct {
        position: relative;
        z-index: 9999999;
        background: _color("secondary");
        width: 100% !important;
        padding: 2px 0;
        box-sizing: border-box;
        margin-top: 2px;

        .x-toolbar-left .x-toolbar-cell {
            display: inline-block !important;
            margin: 0 2px;
            opacity: 0.8;

            .x-btn-mc img {
                display: none;
            }

            &:nth-child(1) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 78 */
                background: url( _icon("navFirst", "grey")) no-repeat center center/14px 14px; /* OPTIMISE URL ::: css/components/_build.scss ::: 35 */
                margin-left: 0px;
            }

            &:nth-child(2) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 79 */
                background: url(../images/icons/icon_arrow_left_single_grey@X2.png) no-repeat center center/14px 14px; /* OPTIMISE URL ::: css/components/_build.scss ::: 36 */
                margin-left: 5px;
            }

            &:nth-child(8) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 80 */
                background: url( _icon("navNext", "grey")) no-repeat center center/14px 14px; /* OPTIMISE URL ::: css/components/_build.scss ::: 37 */
                margin-right: 5px;
            }

            &:nth-child(9) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 81 */
                background: url( _icon("navLast", "grey")) no-repeat center center/14px 14px; /* OPTIMISE URL ::: css/components/_build.scss ::: 38 */
                margin-right: 5px;
            }

            &:nth-child(11) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 82 */
                background: url( _icon("refresh", "grey")) no-repeat center center/16px 12px; /* OPTIMISE URL ::: css/components/_build.scss ::: 39 */
                opacity: .52;
            }

            .my-paging-text {
                font-family: "Nunito Sans", sans-serif;
                font-size: 12px;
                font-weight: 100;
            }

            .gwt-TextBox {
                font-family: "Nunito Sans", sans-serif;
                font-size: 12px;
                color: _color("primary", g); /* TO THEME */
                font-weight: 100;
                background: rgba(241, 241, 241, 0.7); /* TO THEME */
                padding: 3px;
                border: none;
            }

        }

    }

    .x-toolbar-left-row .x-toolbar-cell:nth-child(1) .x-btn-text,
    .x-toolbar-left-row .x-toolbar-cell:nth-child(2) .x-btn-text {
        background: transparent !important;
    }

    .x-window-tbar .x-component table tbody tr td .x-small-editor.x-toolbar.x-component.x-toolbar-layout-ct .x-toolbar-cell { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 83 */
        background: none !important;
    }

    .x-form-field-wrap .x-form-text {
        background: _color("white") !important;
        color: _color("primary") !important;
        margin-top: 5px;

        &.x-form-focus {
            box-shadow: 0px 1px 2px _color("black", b); /* TO THEME */
        }

    }

    label {
        line-height: 28px;
    }

    .search-container .x-toolbar-cell {

        &:nth-child(1) > div { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 84 */
            display: none;
        }

        &:nth-child(2) input { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 85 */
            background-image: url( _icon("search", "grey")) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 40 */
            background-repeat: no-repeat !important;
            background-position: left center !important;
            background-size: 23px !important;
            width: 100% !important;
            padding: 4px 5px 5px 24px !important;
            font-size: 12px;
            font-family: "Nunito Sans", sans-serif;
            color: _color("primary");
            margin-top: 0;
        }

        &:nth-child(3) .x-btn-icon { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 86 */
            height: 27px;
            padding: 0 8px;
            background: _color("quinary");
            margin-left: -4px;

            &:before {
                content: "Search";
                display: block;
                top: 6px;
                position: relative;
                text-align: center;
                font-size: 11px;
                color: _color("secondary", g);
            }

            > tbody {
                display: none;
            }

        }

    }

    div[role="combobox"] img {
        background: url( _icon("arrowDown", "grey")) no-repeat center center transparent !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 41 */
    }

}


// Import
.x-window.content-import .x-window-body {
    min-height: 100px !important;

    .x-btn-noicon .x-btn-small .x-btn-text {
        padding: 6px 8px;
        background: _color("status", error); /* TO THEME */
        color: _color("secondary"); /* TO THEME */
    }

}

// Export
.x-window.content-export {

    width: 802px !important;
    left: calc((100% - 802px) / 2) !important;


    .x-small-editor.x-panel-btns-center.x-panel-fbar.x-component.x-toolbar-layout-ct {
        width: 100% !important;
    }

    .x-window-ml table {
        display: none;
    }

    .x-window-bwrap {
        padding-top: 8px;
    }

    .x-toolbar-left-row .x-toolbar-cell {
        float: none !important;
    }

    .x-progress-wrap {
        width: 100% !important;
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 3px !important;
    }

    .x-progress-inner {
        background-color: transparent;
    }

    .x-progress-bar {
        border: none;
    }

}

.x-window.trashboard-engine,
.x-window.preview-window {

    .x-window-header .x-panel-toolbar {

        table tbody tr td .x-tool-close {
            background: url( _icon("closeLarge", "grey")) no-repeat center top; /* OPTIMISE URL ::: css/components/_build.scss ::: 42 */
            background-size: 20px;
            width: 25px;
            height: 25px;
            opacity: 0.8;
            display: block;

            &:hover {
                opacity: 1;

            }
        }
    }
}

// Publication manager
.x-window.publication-manager-engine,
.x-window.trashboard-engine,
.x-window.preview-window {

    .x-window-header .x-panel-toolbar {
        display: block;
        margin-top: 8px;
        pointer-events: all;

        table tbody tr td .x-tool-maximize {
            display: none;
        }
    }

    .x-grid3-hd-inner {
        padding-left: 0;
    }

    td.x-grid3-hd-menu-open .x-grid3-hd-inner {
        background: _color("secondary", a) !important;
    }

    .x-grid3-header-inner {
        width: 100% !important
    }

    .x-grid3-header-inner .x-grid3-hh > table > tbody td div .x-grid3-hd-btn { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 87 */
        background: url( _icon("arrowDown", "grey")) no-repeat center center !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 43 */
        width: 23px;
        background-size: 13px !important;
        opacity: 0.7;
    }

    .x-grid3-scroller {
        overflow-y: unset;
        overflow-x: hidden;
    }

    .x-window-body.x-window-body-noborder {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .x-window-header > img {
        display: none;
    }

    .x-grid3 .x-grid3-td-displayName::after, .x-grid3 .gwt-content-label::after {
        display: none;
    }

    .x-grid3-header {
        display: table-cell;
        background: transparent !important;

        .x-grid3-hh {
            text-transform: uppercase;
            color: _color("black", c);
            margin: 2px 0;

            > table {
                padding: 4px 0;

                .x-grid3-hd.x-grid3-cell {
                    border-color: transparent !important;

                    span,
                    span div {
                        font-weight: 800;
                        //margin-left: 2px;
                    }
                }
            }
        }

        td.x-grid3-hd-over .x-grid3-hd-inner {
            background: transparent !important;
        }

    }

    .x-window-mc .x-window-bbar .x-panel-btns-center > .x-toolbar-ct > tbody {
        float: right;
    }
}


// Trash panel

.x-window.trashboard-engine {
    .x-grid3-header-inner {
        overflow: inherit !important;
    }

    .x-grid3-cell-inner {

        &.x-grid3-col-displayName {
            max-width: 135px;
        }

        &.x-grid3-col-j\:deletionDate {
            max-width: 140px;
        }

    }

    .x-grid3 .x-grid3-row.x-grid3-row-selected {
        background-color: transparent !important;

        &.x-grid3-row-over {
            background: transparent !important;
        }

        .x-grid3-td-displayName {
            color: inherit !important;
        }

        &.x-grid3-row-over .x-grid3-td-displayName {
            color: inherit !important;
        }

    }

    .x-grid3-cell-inner.x-grid3-col-icon,
    .x-grid3-cell-inner.x-grid3-col-undelete,
    .x-grid3-cell-inner.x-grid3-col-Delete,
    .x-grid3-cell-inner.x-grid3-col-infos {
        padding-top: 10px;
        box-sizing: border-box;
    }

    button.x-btn-text img.x-btn-image:hover {
        opacity: 1 !important;
    }

    .x-grid3-td-infos button.x-btn-text {
        text-indent: -99999px;

        img.x-btn-image {
            background: url(../images/icons/ic_info_outline-DARK@2x.png) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 44 */
            width: 100% !important;
            background-repeat: no-repeat !important;
            background-size: 18px !important;
            background-position: center center !important;
        }
    }

    .x-grid3-td-Delete button.x-btn-text {
        text-indent: -99999px;

        img.x-btn-image {
            background: url(../images/icons/ic_delete_black.png) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 45 */
            width: 100% !important;
            background-repeat: no-repeat !important;
            background-size: 18px !important;
            background-position: center center !important;
            opacity: .52;
        }

    }

    .x-grid3-td-undelete button.x-btn-text {
        text-indent: -99999px;

        img.x-btn-image {
            background: url(../images/icons/ic_undo_black.png) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 46 */
            width: 100% !important;
            background-repeat: no-repeat !important;
            background-size: 18px !important;
            background-position: center center !important;
            opacity: .52;
        }
    }
}

.x-window.preview-window {

    .indigo-modal-mask {
        background: rgba(250, 250, 250, 0.96) !important;
    }

    > .x-window-tl,
    > .x-window-bwrap {
        background: _color("white", normal) !important;
        width: 562px !important;
    }

    .x-window-bl {
        display: none;
    }

    .x-window-body {
        > div {
            width: 100% !important;
            height: auto !important;
        }
    }

    .x-window-header {
        &:before {
            content: "Details"
        }
    }

    textarea {
        background: _color("secondary", d);
        border: none !important;
        margin: 4px 0;
        box-sizing: border-box;
        padding: 8px;
        height: 48px;
        left: 1px;
        position: relative;
    }

    textarea + div {
        font-weight: 700;
    }


    .x-panel-fbar .x-btn.x-btn-noicon button {
        margin-top: 8px;
        background: _color("tertiary") !important;
        color: _color("secondary", a) !important;
    }

    .x-window-footer table.x-toolbar-ct {
        float: right;
    }

}

.x-window-plain.x-window-dlg {
    z-index: 99999999 !important;
    max-height: 100vh;
    overflow: scroll;
    min-width: 466px !important;
}

.x-window-plain.x-window-dlg span.ext-mb-text > span {
    color: _color("quaternary") !important;
    font-weight: 600;
    font-size: 13px;
    top: 2px;
    position: relative;
}


// Image edit modals

// on edit mode, add background
[data-indigo-app="edit"] {

    .x-window.image-crop,
    .x-window.image-rotate,
    .x-window.image-resize {

        .x-window-draggable .x-window-header-text {
            z-index: 99;
            position: relative;
        }
    }
}


.x-window.image-crop,
.x-window.image-rotate,
.x-window.image-resize {

    .x-form-field-wrap {
        width: initial !important;
    }

    .x-window-header-text {
        display: block;
    }

    .x-toolbar-cell {
        float: none !important;
    }

    .x-window-bbar {
        width: auto !important;
    }

    table.x-toolbar-ct {
        float: right;
    }

    input.x-form-field {
        margin-bottom: 2px;
    }

    .x-form-text {
        @include _input(LIGHT);
    }

    .x-window-bwrap {
        position: relative !important;
    }

    div[role="combobox"] img {
        background: url( _icon("arrowDown", "grey")) no-repeat center center transparent !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 47 */
    }

}

.x-window.image-crop {

    top: 0 !important;
    bottom: 0 !important;
    margin: auto;
    padding-top: 4%;


    > .x-window-tl,
    > .x-window-bwrap {
        width: 100% !important;
    }

    .x-component.x-column-layout-ct .x-column-inner .x-form-field-wrap.x-component.x-column {
        margin-top: 24px;
        margin-right: 16px;
        margin-bottom: 8px;
    }

    form.x-form-label-left {
        height: 100% !important;
    }

    > .x-window-bwrap .x-window-mc .x-window-body {
        margin-bottom: 8px;
        padding-bottom: 0 !important;
        height: 100% !important;
        height: fit-content !important;
        max-height: calc(100% - 152px);
    }

}

.x-window.image-rotate {

    .x-window-body {
        min-height: 72px;
    }

    .x-form-field-wrap {
        width: calc(100% - 4px) !important;
        margin-left: 2px;
    }

}

.x-window.image-resize {

    .x-window-body {
        min-height: 270px;
    }

}


// Download modal
.x-window.download-file {

    .x-window-bwrap {
        min-height: 87px;

        .x-window-body {
            min-height: 87px;

            a {
                text-decoration: none;
                font-size: 12px;
                font-weight: 600;
                color: _color("tertiary");
                border-bottom: 1px dashed _color("tertiary");
            }

        }

    }

    .x-window-header {

        .x-window-header-text {
            display: block !important;
        }

        .x-panel-toolbar {
            display: block;

            table tbody tr td .x-tool-close {
                height: 22px;
                width: 22px;
                background-image: url(../images/icon-close-large.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 48 */
                background-position: initial !important;
                margin-top: 8px;
                pointer-events: all;
            }
        }
    }
}


/////////////////////////////////////////////////
// COMPARE PANEL ////////////////////////////////
/////////////////////////////////////////////////

.x-window.compare-engine {
    background: _color("primary", a) !important;

    label {
        color: #F5F5F5 !important;
    }

    .x-window-header {
        height: 64px !important;
        line-height: 64px;
        padding-left: 16px !important;
        margin-top: 5px;

        > .x-component:first-child { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 88 */
            margin-top: 22px;
            margin-right: 16px;
            pointer-events: all;

            table tbody tr td .x-tool-close {
                height: 22px;
                width: 22px;
                background-image: url(../images/icon-close-large.png); /* OPTIMISE URL ::: css/components/_build.scss ::: 49 */
                background-position: initial !important;
            }
        }

        .x-window-header-text {
            text-shadow: none;
            border: none;
            padding: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            margin-bottom: 10px;
            pointer-events: none !important;
            font-family: "Raleway", sans-serif;
            font-size: 24px;
            font-weight: 100;
        }
    }

    .x-panel-toolbar .x-tool-restore {
        display: none;
    }

    .x-panel-header,
    .x-toolbar {
        background: _color("primary", d); /* TO THEME */
        border: 1px solid _color("primary", d); /* TO THEME */
        color: _color("secondary"); /* TO THEME */
    }

    .x-panel-bwrap {

        button {
            margin-left: 10px;
            margin-bottom: 1px;

            img {
                background: url(../images/icons/ic_refresh.png) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 50 */
                background-size: 18px 18px !important;
                background-repeat: no-repeat !important;
                left: 0 !important;
                top: 0 !important;
                opacity: .64;
            }

        }

        .x-toolbar-right button img {
            background: url(../images/icons/ic_more_vert_white_.png) !important; /* OPTIMISE URL ::: css/components/_build.scss ::: 51 */
            background-size: 19px 19px !important;
            background-repeat: no-repeat !important;
            left: -6px !important;
            top: -2px !important;
        }

        .x-btn-mc button.x-btn-text {
            text-transform: uppercase;
            padding: 0 4px !important;
            font-weight: 500;
            color: #F5F5F5; /* TO THEME */
        }

        table.x-btn-pressed .x-btn-mc button.x-btn-text {
            color: _color("status", warning); /* TO THEME */
        }

    }

    .x-panel:last-child { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 89 */
        border-left: 1px solid _color("primary", d); /* TO THEME */
    }

    .x-form-field-wrap.x-component {
        background: _color("secondary", a); /* TO THEME */
        margin-left: 12px;
    }

    .action-bar-tool-item .x-btn-mc button.x-btn-text img {
        display: none;
    }
}


/////////////////////////////////////////////////
// TRANSLATION ENGINE ///////////////////////////
/////////////////////////////////////////////////

.translate-content-engine {
    background: linear-gradient(to right bottom, whitesmoke 50%, #fbfbfb 100%);
    height: 100% !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;

    .indigo-modal-mask {
        display: none;
    }

    > .x-window-tl,
    > .x-window-bwrap {
        width: 100% !important;
        padding: 0 !important;
        background: none !important;
    }

    > .x-window-bwrap {
        height: calc(100% - 118px);

        .x-window-ml,
        .x-window-mr,
        .x-window-mc {
            height: 100% !important;

            > .x-window-body {
                height: 100% !important;

                > .x-border-layout-ct {
                    height: calc(100% - 52px) !important;
                }
            }
        }
    }

    .mypanel.x-component .x-component {
        width: 100% !important;
    }

    .mypanel.x-component img.invalid-icon.invalid-icon {
        width: 4px !important;
    }

    .x-window-header {
        height: 64px !important;
        line-height: 64px;
        padding-left: 16px !important;

        .x-window-header-text {
            font-size: 36px;
            position: fixed;
            left: 26px;
            top: 0px;
            color: _theme($TITLE--COLOR, $EDIT-ENGINE);
            font-family: _font("raleway");
            font-weight: _weight("extralight");
            display: block;
        }

        > .x-component:first-child { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 90 */
            margin-top: 22px;
            margin-right: 16px;
            pointer-events: all;

            table tbody tr td .x-tool-close {
                background: url( _icon("closeLarge", "grey")) no-repeat center bottom; /* OPTIMISE URL ::: css/components/_build.scss ::: 52 */
                background-size: 20px;
                width: 25px;
                height: 25px;
                opacity: 0.8;
                display: block;
            }
        }
    }

    .x-panel-toolbar .x-tool-maximize {
        display: none;
    }

    .x-border-panel.x-border-layout-ct {
        height: 100% !important;
        width: calc(50% - 6px) !important;

        &:nth-child(2) {
            width: calc(50% + 6px) !important;
        }
    }

    // Footer
    .x-window-bbar,
    > .x-panel-bbar {
        display: block;
        position: fixed;
        background: _theme($FOOTER--BG, $EDIT-ENGINE);
        border-top: 1px solid _color("primary", g);
        box-shadow: _theme($FOOTER--SHADOW, $EDIT-ENGINE);
        box-sizing: border-box;
        left: -30px;
        width: calc(100% + 60px) !important;
        bottom: -55px;
        padding: 20px 0px 30px 50px;
        height: 109px;
        z-index: 999;

        .x-panel-fbar {
            width: 100% !important;
            height: 100%;

            .x-toolbar-left {
                position: fixed;
                right: 4px;
                bottom: 0;
            }

            .x-toolbar-cell {
                float: right;
                margin-left: 5px;
                padding-bottom: 10px;

                &:nth-child(1) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 91 */
                    margin-left: 0;

                    > div {
                        position: fixed !important;
                        left: 15px;
                        bottom: 18px;

                        label {
                            font-size: 14px;
                            color: #F5F5F5;
                            font-weight: 100;
                            font-family: "Nunito Sans", sans-serif;
                        }
                    }
                }

                &:nth-child(2) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 92 */
                    @include button("ACTIONBAR---SUGGESTED");
                }

                @at-root .engine-panel.createcontentengine-ctn > .x-panel-bwrap > .x-panel-bbar .x-panel-fbar .x-toolbar-cell:nth-child(3) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 93 */
                    @include button("ACTIONBAR---SUGGESTED");
                }

                &:last-child {
                    float: left;
                    margin-right: 5px;
                }
            }
        }
    }

    // Panels
    .x-component.x-border-panel.x-border-layout-ct {

        > .x-component.x-border-panel > .x-component > table tbody td:first-child { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 94 */
            position: absolute;
            left: 26px;
            top: 8px !important;
        }

        > .x-component.x-border-panel > .x-component > table tbody td.x-btn-mc:nth-child(2) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 95 */
            background: _color("quaternary");
            position: absolute;
            left: 224px;
            height: 29px;
            top: 8px;

            button {
                color: _color("secondary", g);
                padding: 0 8px;
                width: auto !important;
                height: 29px;
                font-size: 14px;
                font-weight: 100;
                font-family: "Nunito Sans", sans-serif;
            }
        }

        .x-component.x-border-panel:nth-child(2) { /* OPTIMISE SELECTOR ::: css/components/_build.scss ::: 96 */
            margin-top: 28px;
            background: linear-gradient(to bottom, #dbdbdb 1%, #d5d5d5 100%);
            box-shadow: inset 0 1px 2px 1px _color("black", a);
        }

        .x-form-label-left {
            width: auto;
        }

        .x-fieldset.x-component {
            width: calc(100% - 10px);
            margin-left: 8px !important;
        }

    }

    fieldset {
        .x-form-text,
        textarea.x-form-field,
        div[role="combobox"] input.x-form-text {
            background: #f7f700;
            color: _color("primary");
        }

        .x-form-readonly input {
            background: rgba(245, 245, 245, 0.58) !important;
            box-shadow: none !important;
            cursor: default;
        }
    }

}


/////////////////////////////////////////////////
// TOAST MESSAGES ///////////////////////////////
/////////////////////////////////////////////////


.x-info.x-info.x-info {
    left: 12px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);

    .x-info-tl {
        background: _color("primary", c) !important;

        .x-info-tr {
            background: _color("primary", c);

            .x-info-tc {
                background: _color("primary", c);

                span {
                    color: _color("status", warning);
                    padding-left: 6px;
                }

            }

        }

    }

    .x-info-ml {
        background: _color("primary", c) !important;

        .x-info-mr {
            background: _color("primary", c);

            .x-info-mc {
                background: _color("primary", c);

                .x-info-body {
                    color: _color("white");
                    padding-top: 6px;
                    padding-left: 6px;
                    box-sizing: border-box;

                    .x-component {
                        font-family: _font("nunito");
                        font-size: 12px;
                        font-weight: _weight("semibold");
                    }

                }

            }

        }

    }

    .x-info-bl.x-info-nofooter {
        background: _color("primary", c);

        .x-info-br {
            background: _color("primary", c);

            .x-info-bc {
                background: _color("primary", c);
            }

        }

    }

}


// Preview image modal
// Full size image preview
.fileimage-browse-preview.x-window-plain {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999910 !important;

    .x-window-header {
        height: 40px;

        &:before {
            content: "Preview";
            display: block;
            width: 100%;
            pointer-events: none;
            position: absolute;;
            top: 12px;
            left: 31px;
            @include text(_size("big"), _color("primary"), _weight("light"), _font("raleway"));
            z-index: 999;
        }

    }

    .x-window-header .x-panel-toolbar {
        display: block;
        margin-top: 8px;
        pointer-events: all;

        table tbody tr td .x-tool-close {
            background: url( _icon("closeLarge", "grey")) no-repeat center top; /* OPTIMISE URL ::: css/components/_build.scss ::: 53 */
            background-size: 20px;
            width: 25px;
            height: 25px;
            opacity: 0.8;
            display: block;
            right: 31px;
            position: absolute;
            top: 25px;
        }

    }

    .x-tool-refresh,
    .x-tool-maximize,
    .x-resizable-handle,
    .button-save,
    .x-window-header-text {
        display: none !important;
    }

    .x-window-tl {
        z-index: 999;
    }

    .x-window-bwrap {
        width: calc(100% - 40px);
        height: calc(100% - 90px);
        z-index: 999;
        position: relative !important;
    }

    .x-window-ml,
    .x-window-mr,
    .x-window-mc,
    .x-window-body {
        width: 100% !important;
        height: 100% !important;
    }

    .x-window-body,
    img.gwt-Image {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    img.gwt-Image {
        left: 0 !important;
        top: 0 !important;
    }

    .x-resizable-handle {
        display: none;
    }

}

/////////////////////////////////////////////////
// LOGIN MODAL //////////////////////////////////
/////////////////////////////////////////////////

.x-window.login-box {

    .x-panel-fbar {
        height: 60px !important;

        .x-toolbar-ct {
            width: 100% !important;
            position: absolute;
            bottom: 0;
            left: 5px;
        }
    }

    .x-panel-btns {
        position: relative;
    }

    .x-component label {
        text-transform: none;
        font-size: 14px;
    }

    .x-form-item {
        margin-top: 10px;
    }

    .x-window-body {
        height: 245px !important;
    }

    > .x-window-bwrap {
        height: 270px;
    }

    .x-panel-body-noheader > form > div > table tr:nth-child(2) > td.x-table-layout-cell {
        position: absolute;
        right: 0;
        bottom: 44px;
        z-index: 99;

        > label {
            color: #F44336 !important;
            font-weight: 600;
            font-size: 12px;
        }
    }
}
